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

Posted 2023-03-06

【中文标题】如何从 textarea 中获取突出显示的文本位置？

【英文标题】：How to get highlighted text position from textarea?

【发布时间】：2020-06-07 03:20:05

【问题描述】：

我想使用 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>

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

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

从这个字符串中，如果我从 textarea 中选择“成为一个好人”， 那么如何在javascript中获取选定的文本/字符串位置？ 这里选择的字符串字符从 29 开始，到 49 结束。所以开始位置是 29，结束位置是 49

【问题讨论】：

位置是指字符串中“become”的字符“b”的索引是多少？

我觉得这个问题只是问htmlInputElement.selectionStart 和selectionEnd 而答案大多是关于选择事件。不过，写一个包含在所有其他答案中的答案是没有意义的。

这能回答你的问题吗？ How to get selected text from textbox control with javascript

【参考方案1】：

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

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

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>

【讨论】：

如果你选择使用键盘而不是鼠标，这不会触发。

@curiousdannii 我已经更新了答案，现在它也适用于键盘选择

【参考方案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>

【参考方案3】：

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

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

这可以通过将once 选项添加到addEventListener 来实现，但遗憾的是IE11 不支持这就是我在sn-p 中使用该解决方案的原因。

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>

【参考方案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);

【参考方案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)
    
););

【讨论】：

你能对你的代码做一些解释吗？