JQuery/Javascript - 突出显示文本并环绕标签，而不更改 html 结构

Question

我正在尝试制作一个程序，用户可以在其中突出显示要注释的文本。无论用户在何处突出显示文本，我都希望文本保持不变。

类似于此网站的内容：http://genius.com/Future-hater-shit-lyrics

当我尝试突出显示某些 html 标签内的文本时，它会如我所愿地工作。但是，当我在一个或多个 html 标签上突出显示文本时，html 结构会发生变化。我希望这适用于所有 html 标签，因为 html 结构可能会有所不同。有什么办法可以避免这种情况吗？

这是我做的 fiddle 以防我不清楚：https://jsfiddle.net/4a1x4t3y/

对不起我的英语。

function highlightText(){

var selectedText, selectionEl, sel, range;

if (typeof window.getSelection != "undefined") {
    selectedText = window.getSelection().toString();
} 
else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    selectedText = document.selection.createRange().text;
}

if (document.selection && document.selection.createRange) {

    range = document.selection.createRange().duplicate();
    range.collapse(false);

} else if (window.getSelection) {
    sel = window.getSelection();

    if (sel.getRangeAt) {
        range = sel.getRangeAt(0).cloneRange();

    } else {
        range.setStart(sel.anchorNode, sel.anchorOffset);
        range.setEnd(sel.focusNode, sel.focusOffset);

        if (range.collapsed !== sel.isCollapsed) {
            range.setStart(sel.focusNode, sel.focusOffset);
            range.setEnd(sel.anchorNode, sel.anchorOffset);
        }
    }

  var a = document.createElement('a');
  a.textContent = selectedText;
  a.href = "#";

  range.deleteContents();
  range.insertNode(a);
  range.collapse(false);
}
}

$("#article").mouseup(function(){
   highlightText();
});

Answer 1

有两种方法可以解决这个问题。

使用 < br /> 标签来分隔段落而不是 < p > 标签。

例如：https://jsfiddle.net/asagex/4a1x4t3y/1/
当您select文本创建多个a标签时。

这个：

<p> My text of (SELECT START) doom.</p>
<p>More text (SELECT END) and what not </p>

会变成：

<p>My text of <a href="">doom.</a ></p>
<p><a href="">More text</a> and what not </p>

第二个更简单，但只适用于段落标签。如果您也打算使用 span 标签，那么第二个选项是您最好的选择。

JQuery/Javascript - 突出显示文本并环绕标签，而不更改 html 结构

JQuery/Javascript - Highlight text and wrap tags around, without changing the html structure

html

javascript

jquery

text

highlight