匹配单词以在html字符串中选择和突出显示，包括换行符

Question

我有这个代码（下面）找到字符串中的第一个索引和最后一个索引然后选择并突出显示html中的单词。

在html中包含换行符时，它无法正常工作。此外，如果string的第一个索引不是0，它将在最后一个索引中添加一个额外字符。

＆＃13;

＆＃13;

function myFunction() {
   var html = stripHTML(document.getElementById("test"));
 //var html = document.getElementById("test").textContent;


  var search_value = document.getElementById("textbox").value;
  var regex = new RegExp(search_value,'g');


	var text = html;
  alert(text);
  while ((match = regex.exec(text)) != null) {
   
 var mix = match.index+match[0].length
 alert("match found at: " + match.index+ " last: " +mix);
	 
	setSelectionRange(document.getElementById("test"), match.index, match.index+match[0].length);
    highlight("yellow");
       
    }
    
	
}

function stripHTML(text){
return text.innerText.replace(/\r\n|\r|\n/g, " ").replace(/\s\s+/gm, ' ');
}


function getTextNodesIn(node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function setSelectionRange(el, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;

        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i <= textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

function selectAndHighlightRange(id, start, end) {
    setSelectionRange(document.getElementById("test"), start, end);
    highlight("yellow");
}

＆＃13;

<input id ="textbox" type="text" name="sw" size="20">
<button onclick="myFunction()">Try it</button>


<div id="test">here boring text i will break right<br><br><div>now </div><br>here another boring text</div>

＆＃13;

＆＃13;

＆＃13;