突出显示选定文本 javascript 函数的问题答案

【问题标题】：Problems with highlight selected text javascript function突出显示选定文本 javascript 函数的问题
【发布时间】：2012-12-20 15:57:29
【问题描述】：

我正在制作一个简单的网络应用程序，让用户选择文本并以黄色（或任何颜色，无关紧要）突出显示它。这是我目前所拥有的：

        function replaceSelectedText() {
            var sel, range;
            var replacementText, spanTag;
            if (window.getSelection) {
                replacementText = window.getSelection().toString();

                spanTag = document.createElement("span");
                spanTag.className = "highlighted";
                spanTag.appendChild(replacementText);

                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    //range.insertNode(document.createTextNode(replacementText));
                    range.insertNode(spanTag);
                }
            } else if (document.selection && document.selection.createRange) {
                replacementText = '<span class="highlighted">' + document.selection.createRange().text + '</span>';
                range = document.selection.createRange();
                range.text = replacementText;
            }
        }

        document.onmouseup = replaceSelectedText;
        document.onkeyup = replaceSelectedText;

我让它在突出显示所选短语的地方工作，但我只是在正文的 HTML 上使用 replace() 调用，所以如果用户选择了像“a”这样的常用词，“a”的第一次出现会被突出显示，而不是他们点击的那个。

到目前为止，我的代码是否正确，还是应该继续使用 replace() 调用？替换似乎可以工作，但我似乎无法获得所选单词出现位置的数组索引，并且范围似乎没有返回非常有用的值。

提前致谢。

【问题讨论】：

您使用的浏览器是什么？以下链接讨论了选择突出显示，它适用于 Firefox 和 Safari：stackoverflow.com/questions/2990566/…
更新：抱歉，现在我意识到您必须单击箭头下方的复选标记按钮才能接受答案。我已经返回并接受了对我问题的所有好的回答，抱歉我不知道如何早点做到这一点！
如果要突出显示选定的文本，可以使用document.execCommand() 执行此操作。见stackoverflow.com/questions/2582831/…

标签： javascript jquery range getselection

【解决方案1】：

除了您还应该获得光标的位置来替换您可能应该使用的选择之外，我认为这种方法没有任何问题，就像这篇文章中的情况一样：

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

jQuery: Get the cursor position of text in input without browser specific code?

【讨论】：

这仅适用于文本输入和文本区域。我认为问题在于在页面的常规内容中突出显示文本。
@TimDown 这是使用 jquery caret 实现 div 的链接：stackoverflow.com/questions/2871081/…

【解决方案2】：

您可以通过getSelection().baseNode 获得对您所在的特定节点的引用。它还为您提供了选择的索引和长度，因此您可以替换确切的文本而不是进行替换。

【讨论】：

【解决方案3】：

使用http://code.google.com/p/rangy/

用以下代码替换选定的文本添加鼠标事件

 var el = $("<span></span>");
el.text(rangy.getSelection().getRangeAt(0).toString());
 rangy.getSelection().getRangeAt(0).deleteContents();
 rangy.getSelection().getRangeAt(0).insertNode(el.get(0));
 rangy.getSelection().getRangeAt(0).getSelection().setSingleRange(range);

【讨论】：