JQuery / Javascript-突出显示文本并在周围包裹标签，而无需更改html结构

Question

I am trying to make a program where users can highlight text to annotate. I want the text to stay the same no matter where the user highlights text.

Something similar to this website: http://genius.com/Future-hater-shit-lyrics

When I try to highlight text inside some html-tags it works just as I want. But when I highlight text over one or more html-tags the html structure changes. I would like this to work with all html-tags, because the html structure may vary. Is there a way to prevent this?

Here is a fiddle I made in case I am not being clear: https://jsfiddle.net/4a1x4t3y/

Sorry for my english.

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

There are two ways you can tackle this.

1. Use < br /> tags to separate paragraphs instead of < p > tags.

   Ex: https://jsfiddle.net/asagex/4a1x4t3y/1/

2. When you select text create multiple a tags.

This:

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

Would become:

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

The second one is easier but will only work for paragraph tags. If you intend to have span tags as well then the second option is your best bet.