1

我已经使用 javascript 在 html 中实现了文本搜索，我也可以突出显示它，现在我正在寻找使用下一个和上一个按钮在 html 文档中导航，如果有人可以提出一些非常棒的选项和解决方案。提前致谢。

作为参考，我使用以下代码突出显示搜索文本。

function MyApp_HighlightAllOccurencesOfStringForElement(element,keyword) {
  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.parentNode.insertBefore();
        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);
        }
      }
    }
  }
}
4

2 回答 2

2

这是一个带有这个想法的 jsfiddle：（请参阅在http://jsfiddle.net/TAxdp/工作）

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
}

ps“突出显示全部”必须在下一个/上一个之前单击。

于 2012-12-26T18:52:07.770 回答
0

您可以使用以下方法浏览匹配项scrollIntoView()：

例如，遍历到第一个匹配：

document.getElementsByClassName("MyAppHighlight")[0].scrollIntoView(true);

scrollIntoView() 的文档

于 2012-12-26T17:12:57.103 回答