跨元素匹配javascript

Question

你看我的文字荧光笔它有一个变音检测，但我需要跨元素或节点完全匹配但我不知道如何实现它

https://jsfiddle.net/z57o5yge/4/

document.getElementById("btnSearch").onclick = function(){
var search_value = document.getElementById("textbox").value;

var myHilitor = new Hilitor("content");

var exact_match = document.getElementById('exact_match');
var Partially_match = document.getElementById('Partially_match');
var diacritic_match = document.getElementById('diacritic_match');


if (exact_match.checked){myHilitor.setMatchType("exact");}
else {myHilitor.setMatchType("seprate");}

if (Partially_match.checked){myHilitor.setMatchType("Partially");}
else {myHilitor.setMatchType("not_Partially");}

if (diacritic_match.checked){myHilitor.setMatchType("diacritic");}
else {myHilitor.setMatchType("not_diacritic");}

myHilitor.apply(search_value);
}



function Hilitor(id, tag)
{

  var targetNode = document.getElementById(id) || document.body;
  var hiliteTag = tag || "EM";
  var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
  var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
  var wordColor = [];
  var colorIdx = 0;
  var matchRegex = "";
  var exact = false;
  var seprate  = false;
  var Partially = false;
  var diacritic = false;
  var not_diacritic = false;

  // characters to strip from start and end of the input string
  var endCharRegex = XRegExp("^[^\\p{L}\\p{N}]+|[^\\p{L}\\p{N}]+$", "g");
  //("^[^\\p{L}]+|[^\\p{L}]+$", "g");

  // characters used to break up the input string into words
  var breakCharRegex = XRegExp("[\\s]+", "g");

  this.setMatchType = function(type)
  {
    switch(type)
    {

      case "exact":
        window.excat = true;
        window.seprate = false;
        break;
      case "seprate":
        window.seprate = true;
        window.excat = false;
        break;
      case "Partially":
        window.Partially = true;
        window.not_Partially = false;
        break;  
      case "not_Partially":
        window.not_Partially = true;
        window.Partially = false;
      case "diacritic":
        window.diacritic = true;
        window.not_diacritic = false;
        break;
      case "not_diacritic":
        window.not_diacritic = true;
        window.diacritic = false;
        break;


    }
  };

  this.setRegex = function(input)
  {

    //alert(window.excat);  



    input = input.replace(endCharRegex, "");
    //alert(input);
    input = input.replace(/^\||\|$/g, "");
    if(input) {

    if(window.diacritic){input = createAccentRegexp(input);}
    if(window.excat){input = input.split(' ').join('[\\s\\p{P}\\p{S}\\p{m}\u0640]+');}
    if(window.seprate){input = input.replace(breakCharRegex, "|");}

    if(window.Partially){var re = "(" + input + ")";}
    if(window.not_Partially){var re = "(^|[\\s\\p{P}\\p{S}])(" + input + ")(?=[\\s\\p{P}\\p{S}]|$)";} 

      //if(!this.openLeft) re = "\\b" + re;
      //if(!this.openRight) re = re + "\\b";
      //matchRegex = new RegExp(re, "i");
      matchRegex = XRegExp(re, "i");
      return true;
    }
    return false;
  };

  this.getRegex = function()
  {
    var retval = matchRegex.toString();
    retval = retval.replace(/(^\/(\\b)?|\(|\)|(\\b)?\/i$)/g, "");
    retval = retval.replace(/\|/g, " ");
    return retval;
  };

  // recursively apply word highlighting
  this.hiliteWords = function(node)
  {
    if(node === undefined || !node) return;
    if(!matchRegex) return;
    if(skipTags.test(node.nodeName)) return;

    if(node.hasChildNodes()) {
      for(var i=0; i < node.childNodes.length; i++)
        this.hiliteWords(node.childNodes[i]);
    }
    if(node.nodeType == 3) { // NODE_TEXT
      if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
        if(!wordColor[regs[0].toLowerCase()]) {
          wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
        }

        var match = document.createElement(hiliteTag);
        match.appendChild(document.createTextNode(regs[0]));
        match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
        match.style.fontStyle = "inherit";
        match.style.color = "#000";

        var after = node.splitText(regs.index);
        after.nodeValue = after.nodeValue.substring(regs[0].length);
        node.parentNode.insertBefore(match, after);
      }
    };
  };

  // remove highlighting
  this.remove = function()
  {
    var arr = document.getElementsByTagName(hiliteTag);
    while(arr.length && (el = arr[0])) {
      var parent = el.parentNode;
      parent.replaceChild(el.firstChild, el);
      parent.normalize();
    }
  };

  // start highlighting at target node
  this.apply = function(input)
  {
    this.remove();
    if(input === undefined || !input) return;
    if(this.setRegex(input)) {
      this.hiliteWords(targetNode);
    }
  };

}

查看演示 https://jsfiddle.net/z57o5yge/4/