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

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

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

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