Question

我正在创建一个简单的网络应用程序，让用户选择文本并以黄色突出显示（或任何颜色，无关紧要）。以下是我到目前为止的情况：

        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（）调用？替换似乎会起作用，但我似乎无法获得所选单词出现位置的数组索引，并且该范围似乎没有返回非常有用的值。

提前致谢。

Answer 1

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

Answer 2

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

$("#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?

Answer 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);

高亮选择文本javascript函数的问题

3 个答案: