如何在 JavaScript 中获取 textarea 的选定文本范围

Posted 2023-05-07

【中文标题】如何在 JavaScript 中获取 textarea 的选定文本范围

【英文标题】：How to get range of selected text of textarea in JavaScript

【发布时间】：2012-08-25 00:26:24

【问题描述】：

我正在尝试在 textarea 中检索/查找选择的起点和终点。 这是我在 Mozilla 和 chrome 中运行良好但在 IE9 中无法运行的代码

<script type="txt/javascript">
    function update(o) 

            var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
            alert("start :" + s + " End :" + e);
        

        function getSelectionStart(o) 
            if (o.createTextRange) 
                var r = document.selection.createRange().duplicate()
                rse = r.text.length;
                r.moveEnd('character', o.value.length)
                if (r.text == '') return o.value.length
                return o.value.lastIndexOf(r.text)
             else return o.selectionStart
        

        function getSelectionEnd(o) 
            if (o.createTextRange) 
                var r = document.selection.createRang;e().duplicate()
                r.moveStart('character', -o.value.length)
                return r.text.length
             else return o.selectionEnd
        
</script>

<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>

当我在 Mozilla 和 chrome 中测试这段代码时，它给了我正确的答案，但是当我在 IE9 上运行这段代码时 它显示 -1 表示开始，任何值表示结束。

我只想找出 textarea 的选择文本的起点和终点/索引。实际上，上面的代码适用于所有浏览器中的文本框，但不适用于 textarea。

请给我建议...

【问题讨论】：

可能缺少 doctype 声明或缺少 X-UA Compatible，或两者兼而有之。虽然getSelectionEnd() 无法在任何浏览器中使用，但有一个错字，可能只是在帖子中？

【参考方案1】：

使用下面的代码或查看fiddle

   function getTextSelection(el) 
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") 
        start = el.selectionStart;
        end = el.selectionEnd;
     else 
        range = document.selection.createRange();

        if (range && range.parentElement() == el) 
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) 
                start = end = len;
             else 
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) 
                    end = len;
                 else 
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                
            
        
    
    alert("start :" + start + " End :" + end);

【讨论】：

感谢帮助它在 chrome、mozila 中运行良好，但在 IE9 中它显示我的最终值错误。起始值显示正确，但结束值不正确，请您再次检查...

很抱歉没有仔细检查代码。无法让您的示例起作用，因此我在其他地方找到了答案。我希望这对你有帮助（我编辑了之前的代码）。

感谢您的工作，非常感谢您是天才。它在每个浏览器中都向我展示了完美的答案。

关于如何不仅在 中而且在诸如 <p> 等各种元素中实现这一点的任何想法？谢谢</p>

请注意，这适用于 IE

【参考方案2】：

虽然最初的答案可能对 2012 年的 OP 有所帮助，但情况发生了变化，现在变得更简单了，至少在现代浏览器中是这样。

您可以使用 textarea 的 Javascript selectionStart 和 selectionEnd 属性。

基本用法：

这些都是适用于当今主流浏览器（Chrome、Safari、Firefox、Opera、Edge、IE）的标准属性。

例如：

console.log(document.getElementById("text").selectionStart,document.getElementById("text").selectionEnd)

将在 ID text 的文本区域中返回选择的起点和终点。

边界案例：

如果在 textarea 中没有选择项目，那么 start 和 end 属性都将返回 caret 的最后一个位置。如果 textarea 尚未收到焦点，则属性都将返回值 0。

更改选择：

通过将这些属性设置为新值，您将调整活动文本选择。因此，您也可以使用它来选择文本区域中的文本。

检查选择是否到位：

您可以通过检查两个值是否不同来检查当前是否有选择，即如果

document.getElementById("text").selectionStart != document.getElementById("text").selectionEnd

为真，则有文字选择。

参考文献

Live Demo (JSFiddle) Docs at MDN Docs at MSDN

【讨论】：

对于现代浏览器来说，这是一个更好、更现代的答案