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

Question

我正在制作一个简单的web应用程序，让用户选择文本并以黄色(或任何颜色，无关紧要)突出显示。以下是目前为止的内容:

        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，所以如果用户选择了一个常见的词，如"a"，"a"的第一个出现将突出显示，而不是他们点击的一个。

到目前为止，我的代码是否在正确的轨道上，或者我应该仍然使用replace()调用?替换似乎可以工作，但我似乎无法获得所选单词出现的数组索引，并且范围似乎没有返回非常有用的值。

Answer 1

我不认为这种方法有任何问题，除了你还应该得到光标的位置来替换你的选择，你可能应该使用像这篇文章的情况:

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

jQuery:获得文本的光标位置在输入没有浏览器特定的代码?

Answer 2

您可以通过getSelection().baseNode获得对您所在的特定节点的引用。它也会给你索引和选择的长度这样你就可以替换准确的文本而不是使用replace

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