javascript在遇到意外的anchorOffset时执行多个createrange（）

Question

My goal:

Let users highlight different substring in a single long string.

However, once I've highlighted one substring with range.surroundContents(newNode) (newNode is a span with yellow background), the innerHTML of the whole long string changed-- it started to contain the span element; consequently, if the user wants to highlight a substring after the previous highlighted substring in the same long string, the anchorOffset will return the index starting after the previous span.

For example, in this long string:

"Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much."

this long sentence is wrapped by a p whose class name is noting . If the range.surroundContents() method the substring "Privet Drive", then, when I want to get the window.getSelection().anchorOffset of the substring "thank", the answer wrongly is 53 while the correct answer should be 102 . How should I do? Thank you!!

PS I don't want to use substring method to find the position, thank you!

$(".noting").mouseup(function(e){            
    $("#noteContent").val("");/*flushing*/
    curSentNum = $(this).attr("id").split("-")[1];
    $('#curSentNum').val(curSentNum);
    highlightLangName = $(this).attr("id").split("-")[2];
    $('#highlightLangName').val(highlightLangName);
    //console.log(".noting $(this).html()"+$(this).html()+" "+$(this).attr("id"));//id, for example: p-2-French
    if (window.getSelection) {
        highlightedText = window.getSelection().toString();
        curAnchorOffset = window.getSelection().anchorOffset;

        $('#anchorAt').val(curAnchorOffset);
        $('#highlightLen').val(highlightedText.length);

    }
    else if (document.selection && document.selection.type != "Control") {
        highlightedText = document.selection.createRange().text;
    }

});

And then I'll save the anchorAt information to db; after the db operation, I'll immediately call this function using the previous variables remained:

function highlightNoteJustSaved(){
    var curI = noteCounter;
    var anchorAt = parseInt($("#anchorAt").val());
    var highlightLen = parseInt($("#highlightLen").val());
    /*p to find, for example: p-2-French*/
    var curP = document.getElementById('p-'+curSentNum.toString()+"-"+$("#highlightLangName").val());
    var range = document.createRange();
    root_node = curP;

    range.setStart(root_node.childNodes[0], anchorAt);
    range.setEnd(root_node.childNodes[0], anchorAt+highlightLen);

    var newNode = document.createElement("span");
    newNode.style.cssText="background-color:#ceff99";//yellow
    newNode.className = alreadyNoteStr;
    newNode.setAttribute('id','already-note-'+curI.toString());

    range.surroundContents(newNode);
}

for HTML tree node structure, please take a look at the comment below( I didn't figure out how to copy-paste the code at this asking area).

Answer 1

I replaced your method to highlight text with 2 methods. highlightTextNodes finds the word in the content of the node. Searching each child. Also I implemented a highlight remover to show how it works. I replaced the span with a mark tag.

 let alreadyNoteStr = 'already'; let noteCounter = 0; let elementId; $('p.noting').mouseup(function(e) { elementId = $(this).attr('id'); $('#noteContent').val(''); /*flushing*/ curSentNum = elementId.split('-')[1]; $('#curSentNum').val(curSentNum); highlightLangName = elementId.split('-')[2]; $('#highlightLangName').val(highlightLangName); //console.log(".noting $(this).html()"+$(this).html()+" "+$(this).attr("id"));//id, for example: p-2-French if (window.getSelection) { highlightedText = window.getSelection().toString(); curAnchorOffset = window.getSelection().anchorOffset; $("#noteContent").val(highlightedText); $('#anchorAt').val(curAnchorOffset); $('#highlightLen').val(highlightedText.length); highlight(elementId, highlightedText); } else if (document.selection && document.selection.type != "Control") { highlightedText = document.selection.createRange().text; } }); function highlightNoteJustSaved() { let curI = noteCounter; let anchorAt = parseInt($("#anchorAt").val()); let highlightLen = parseInt($("#highlightLen").val()); /*p to find, for example: p-2-French*/ let curP = document.getElementById('p-' + curSentNum.toString() + "-" + $("#highlightLangName").val()); let range = document.createRange(); rootNode = curP; let childNode = rootNode.childNodes[0]; range.setStart(rootNode.childNodes[0], anchorAt); range.setEnd(rootNode.childNodes[0], anchorAt + highlightLen); var newNode = document.createElement("span"); newNode.style.cssText = "background-color:#ceff99"; //yellow newNode.className = alreadyNoteStr; newNode.setAttribute('id', 'already-note-' + curI.toString()); range.surroundContents(newNode); } /* * Takes in an array of consecutive TextNodes and returns a document fragment with `word` highlighted */ function highlightTextNodes(nodes, word) { if (!nodes.length) { return; } let text = ''; // Concatenate the consecutive nodes to get the actual text for (var i = 0; i < nodes.length; i++) { text += nodes[i].textContent; } let fragment = document.createDocumentFragment(); while (true) { // Tweak this if you want to change the highlighting behavior var index = text.toLowerCase().indexOf(word.toLowerCase()); if (index === -1) { break; } // Split the text into [before, match, after] var before = text.slice(0, index); var match = text.slice(index, index + word.length); text = text.slice(index + word.length); // Create the <mark> let mark = document.createElement('mark'); mark.className = 'found'; mark.appendChild(document.createTextNode(match)); // Append it to the fragment fragment.appendChild(document.createTextNode(before)); fragment.appendChild(mark); } // If we have leftover text, just append it to the end if (text.length) { fragment.appendChild(document.createTextNode(text)); } // Replace the nodes with the fragment nodes[0].parentNode.insertBefore(fragment, nodes[0]); for (var i = 0; i < nodes.length; i++) { let node = nodes[nodes.length - i - 1]; node.parentNode.removeChild(node); } } /* * Highlights all instances of `word` in `$node` and its children */ function highlight(id, word) { let node = document.getElementById(id); let children = node.childNodes; let currentRun = []; for (var i = 0; i < children.length; i++) { let child = children[i]; if (child.nodeType === Node.TEXT_NODE) { // Keep track of consecutive text nodes currentRun.push(child); } else { // If we hit a regular element, highlight what we have and start over highlightTextNodes(currentRun, word); currentRun = []; // Ignore text inside of our <mark>s if (child.nodeType === Node.ELEMENT_NODE && child.className !== 'found') { highlight(child, word); } } } // Just in case we have only text nodes as children if (currentRun.length) { highlightTextNodes(currentRun, word); } } /* * Removes all highlighted <mark>s from the given node */ function unhighlight(id) { let node = document.getElementById(id); let marks = [].slice.call(node.querySelectorAll('mark.found')); for (var i = 0; i < marks.length; i++) { let mark = marks[i]; // Replace each <mark> with just a text node of its contents mark.parentNode.replaceChild(document.createTextNode(mark.childNodes[0].textContent), mark); } }

 label { display: block; position: relative; padding-left: 100px; } button { margin-top: 20px; margin-bottom: 20px; padding: 10px; } label>span { position: absolute; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" onclick="unhighlight(elementId);">Unhighlight</button> <div id="div-0" class="only-left-border"> <p class="lan-English noting" id="p-1-English">Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much.</p> </div> <label><span>Content:</span><input type="text" id="noteContent"></input></label> <label><span>Numer:</span><input type="text" id="curSentNum"></input></label> <label><span>Language:</span><input type="text" id="highlightLangName"></input></label> <label><span>Anchor:</span><input type="text" id="anchorAt"></input></label> <label><span>Length:</span><input type="text" id="highlightLen"></input></label>