如何在 Javascript 中访问 <textarea> 中当前突出显示的文本答案

【问题标题】：How to access the currently highlighted text within a <textarea> in Javascript如何在 Javascript 中访问 <textarea> 中当前突出显示的文本
【发布时间】：2021-01-23 22:47:40
【问题描述】：

用户将在页面上的 HTML 文本区域中输入文本。当他们突出显示该文本的一部分时，我如何访问突出显示的字符串？突出显示 textarea 元素中的文本是否会触发任何事件？

这是在 textarea 是一个组件的 react 应用程序的上下文中完成的。

【问题讨论】：

签出this
stackoverflow.com/questions/5379120/…

标签： javascript reactjs

【解决方案1】：

创建一个函数，获取文本区域的值并使用el.selectionStart 和el.selectionEnd 获取开始和结束，然后使用el.substring() 在 定义的约束内获取选定文本开始和结束。

最后，在监听文本区域select 事件的事件监听器中运行函数。

let textArea = document.getElementById('textArea')
let display = document.getElementById('display')

let getSelectedText = () => {
  let selectedText = textArea.value
  let selStart = textArea.selectionStart
  let selEnd = textArea.selectionEnd
  return selectedText.substring(selStart, selEnd)
}


textArea.addEventListener('select', () => {
  display.innerHTML = `<b>Your selected text is:</b> <i>${getSelectedText()}</i>`
})

<textarea id='textArea' rows="7" cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>

<div id="display"></div>

【讨论】：