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 に答える