Question

我已经使用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);
        }
      }
    }
  }
}

Answer 1

这是一个有这个想法的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
}

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

Answer 2

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

例如，遍历第一场比赛：

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

Documentation for scrollIntoView()

使用javascript查找html文档中所有出现的文本以及下一个和上一个选项

2 个答案: