1

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

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

提前致谢。

4

3 回答 3

1

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

于 2012-12-20T16:05:55.057 回答
1

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

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

jQuery：在没有浏览器特定代码的情况下获取输入中文本的光标位置？

于 2012-12-20T16:12:09.590 回答
0

使用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);
于 2012-12-20T16:11:59.040 回答