如何访问当前突出显示的文本<textarea>&lt;i&gt;in Javascript&lt;/div&gt;&lt;/i&gt;&lt;b&gt;在Javascript中&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 用户将在页面上的 HTML 文本区域中输入文本。 当他们突出显示该文本的一部分时，我如何访问突出显示的字符串？ 突出显示 textarea 元素中的文本是否会触发任何事件？</p><p> 这是在文本区域是一个组件的反应应用程序的上下文中完成的。</p></div>

Question

The user will enter text into a HTML textarea on the page. When they highlight part of that text, how can I access the highlighted string? Are there any events triggered by highlighting of text in a textarea element?

This is being done in the context of a react app where the textarea is a component.

Answer 1

Create a function that takes the value of your text area and gets the start and end using el.selectionStart and el.selectionEnd , then use el.substring() to get the selected text within the defined constraints for start and end .

Lastly, run the function within an eventlistener that is listening to the text areas select event.

 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>