Javascript:查找并突出显示所有出现的关键字。不区分大小写，部分和完整单词

Question

我正在尝试向我的一个网络屏幕添加一个搜索栏，以便搜索并突出显示所搜索关键字的所有出现位置。通过我在堆栈溢出上找到的一个示例，我可以搜索文本中硬编码的任何文本，但我有一个文件正在读入窗口，我希望能够以相同的方式搜索并突出显示该文件。有人可以帮助我吗？

Javascript

var MyApp_SearchResultCount;
var currSelected;

function MyApp_HighlightAllOccurencesOfStringForElement(element,keyword) {
    MyApp_SearchResultCount = 0;
    currSelected = -1;
  if (element) {
    if (element.nodeType == 3) {        // Text node
      while (true) {
        var value = element.nodeValue;  // Search for keyword in text node
        var idx = value.toLowerCase().indexOf(keyword);

        if (idx < 0) break;             // not found, abort

        var span = document.createElement("span");
        var text = document.createTextNode(value.substr(idx,keyword.length));
        span.appendChild(text);
        span.setAttribute("class","MyAppHighlight");
        span.style.backgroundColor="yellow";
        span.style.color="black";
        text = document.createTextNode(value.substr(idx+keyword.length));
        element.deleteData(idx, value.length - idx);
        var next = element.nextSibling;
        element.parentNode.insertBefore(span, next);
        element.parentNode.insertBefore(text, next);
        element = text;
        MyApp_SearchResultCount++;  // update the counter

      }
    } else if (element.nodeType == 1) { // Element node
      if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
        for (var i=element.childNodes.length-1; i>=0; i--) {
          MyApp_HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword);
        }
      }
    }
  }
}

function goNext(){
    jump(1);
}
function goPrev(){
    jump(-1);
}

function jump(howHigh){
        prevSelected = currSelected;
    currSelected = currSelected + howHigh;

    if (currSelected < 0){
        currSelected = MyApp_SearchResultCount + currSelected;
    }
    if (currSelected >= MyApp_SearchResultCount){
        currSelected = currSelected - MyApp_SearchResultCount;
    }

    prevEl = document.getElementsByClassName("MyAppHighlight")[prevSelected];
    if (prevEl){
        prevEl.style.backgroundColor="yellow";
    }
    el = document.getElementsByClassName("MyAppHighlight")[currSelected]; 
    el.style.backgroundColor="green";
    el.scrollIntoView(true); //thanks techfoobar
}

HTML

<div id="divSection" class="divSection" onclick="selectAll(this)">
        <%=bean.getValue("configText")%>

        <p> BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah </p>
</div> 

请参阅此示例 http://jsfiddle.net/catherinepaul01/eb344g2c/2/

注意。如果有人知道使用 dojo 可以做到这一点的方法，那就更好了!!

Answer 1

也许您解决问题的方式是错误的。

如果我希望能够突出显示文本中出现的所有单词，我会创建一个独特的 HTML 文本对象，并且通过单个指令我就能做到!

str = str.replace(word, "<b>" && word && "</b>");