如何从textarea获取突出显示的文本位置？

Question

我想使用 javascript 获取选定的文本位置。 例如，
我有一个简单的文本区域。

 #input-text { resize: none; width: 50%; height: 50px; margin: 1rem auto; }

 <textarea id="input-text">I am a student and I want to become a good person</textarea>

在我的 textarea 中，我有一些文本，例如：

"I am a student and I want to become a good person"

从这个字符串中，如果我从文本区域中选择“成为一个好人”，
那么如何在javascript中获取选定的文本/字符串位置？


这里选择的字符串字符从 29 开始，到 49 结束。所以开始位置是 29 & 结束位置是 49

Answer 1

这将适用于使用鼠标和键盘为页面上的所有<textarea>元素选择<textarea> 。 如果您不希望所有<textarea>元素都具有此文本选​​择，请更改选择器（更具体）。

阅读评论，如果您不想要/不需要键盘选择，您将了解如何禁用键盘选择。

 var mySelection = function (element) { let startPos = element.selectionStart; let endPos = element.selectionEnd; let selectedText = element.value.substring(startPos, endPos); if(selectedText.length <= 0) { return; // stop here if selection length is <= 0 } // log the selection console.log("startPos: " + startPos, " | endPos: " + endPos ); console.log("selectedText: " + selectedText); }; var textAreaElements = document.querySelectorAll('textarea'); [...textAreaElements].forEach(function(element) { // register "mouseup" event for the mouse element.addEventListener('mouseup', function(){ mySelection(element) }); // register "keyup" event for the keyboard element.addEventListener('keyup', function( event ) { // assuming we need CTRL, SHIFT or CMD key to select text // only listen for those keyup events if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) { mySelection(element) } }); });

 textarea { resize: none; width: 50%; height: 50px; margin: 1rem auto; }

 <textarea>I am a student and I want to become a good person</textarea>

Answer 2

我会利用onselect事件来获得相同的结果。

<textarea id="input-text" onselect="myFunction(event)">I am a student and I want to become a good person</textarea>


<script>
    function myFunction(event) {
      const start  = event.currentTarget.selectionStart;
      const end= event.currentTarget.selectionEnd;
    }
</script>

Answer 3

Caramba 的回答非常有效，但是我遇到的问题是，如果您选择了一些文本并在 textarea之外释放鼠标，则该事件不会触发。

为了解决这个问题，我将初始事件更改为mousedown ，此事件在文档上注册mouseup事件以确保在释放光标后触发。 mouseup事件会在触发后自行移除。

这可以通过向addEventListener添加once选项来实现，但遗憾的是 IE11 不支持，这就是我在代码段中使用解决方案的原因。

 var mySelection = function (element) { let startPos = element.selectionStart; let endPos = element.selectionEnd; let selectedText = element.value.substring(startPos, endPos); if(selectedText.length <= 0) { return; // stop here if selection length is <= 0 } // log the selection console.log("startPos: " + startPos, " | endPos: " + endPos ); console.log("selectedText: " + selectedText); }; function addSelfDestructiveEventListener (element, eventType, callback) { let handler = () => { callback(); element.removeEventListener(eventType, handler); }; element.addEventListener(eventType, handler); }; var textAreaElements = document.querySelectorAll('textarea'); [...textAreaElements].forEach(function(element) { // register "mouseup" event for those element.addEventListener('mousedown', function(){ // This will only run the event once and then remove itself addSelfDestructiveEventListener(document, 'mouseup', function() { mySelection(element) }) }); // register "keyup" event for the keyboard element.addEventListener('keyup', function( event ) { // assuming we need CTRL, SHIFT or CMD key to select text // only listen for those keyup events if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) { mySelection(element) } }); });

 textarea { resize: none; width: 50%; height: 50px; margin: 1rem auto; }

 <textarea>I am a student and I want to become a good person</textarea>

Answer 4

    var idoftextarea='answer';
    function getSelectedText(idoftextarea){
        var textArea = document.getElementById(idoftextarea);
        var text =textArea.value;
        var indexStart=textArea.selectionStart;
        var indexEnd=textArea.selectionEnd;
        alert(text.substring(indexStart, indexEnd));

    }


    getSelectedText(idoftextarea);

Answer 5

var mySelection = function (element) {
let startPos = element.selectionStart;
let endPos = element.selectionEnd;
let selectedText = element.value.substring(startPos, endPos);

if(selectedText.length <= 0) {
  return; // stop here if selection length is <= 0
}

// log the selection
console.log("startPos: " + startPos, " | endPos: " + endPos );
console.log("selectedText: " +  selectedText); };var textAreaElements = document.querySelectorAll('textarea'); 
[...textAreaElements].forEach(function(element) {
// register "mouseup" event for the mouse
element.addEventListener('mouseup', function(){
    mySelection(element)
});
// register "keyup" event for the keyboard
element.addEventListener('keyup', function( event ) {
    // assuming we need CTRL, SHIFT or CMD key to select text
    // only listen for those keyup events
    if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
        mySelection(element)
    }
});});