UIWebViewで文字列の最初の出現をハイライトする方法は？

Question

私はのUIWebView内の文字列のすべての出現箇所を見つけるには、以下のJavaScriptコードを使用します。

UIWebViewSearch.js：

var uiWebview_SearchResultCount = 0; 

/*! 
@method  uiWebview_HighlightAllOccurencesOfStringForElement 
@abstract // helper function, recursively searches in elements and their child nodes 
@discussion // helper function, recursively searches in elements and their child nodes 

element - HTML elements 
keyword - string to search 
*/ 

function uiWebview_HighlightAllOccurencesOfStringForElement(element,keyword) { 
    if (element) { 
     if (element.nodeType == 3) {  // Text node 

      var count = 0; 
      var elementTmp = element; 
      while (true) { 
       var value = elementTmp.nodeValue; // Search for keyword in text node 
       var idx = value.toLowerCase().indexOf(keyword); 

       if (idx < 0) break; 

       count++; 
       elementTmp = document.createTextNode(value.substr(idx+keyword.length)); 
      } 

      uiWebview_SearchResultCount += count; 

      var index = uiWebview_SearchResultCount; 
      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 

       //we create a SPAN element for every parts of matched keywords 
       var span = document.createElement("span"); 
       var text = document.createTextNode(value.substr(idx,keyword.length)); 
       span.appendChild(text); 

       span.setAttribute("class","uiWebviewHighlight"); 
       span.style.backgroundColor="yellow"; 
       span.style.color="black"; 

       index--; 
       span.setAttribute("id", "SEARCH WORD"+(index)); 
       //span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount); 

       //element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount); 

       //uiWebview_SearchResultCount++; // update the counter 

       text = document.createTextNode(value.substr(idx+keyword.length)); 
       element.deleteData(idx, value.length - idx); 

       var next = element.nextSibling; 
       //alert(element.parentNode); 
       element.parentNode.insertBefore(span, next); 
       element.parentNode.insertBefore(text, next); 
       element = text; 
      } 


     } 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--) { 
        uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword); 
       } 
      } 
     } 
    } 
} 

// the main entry point to start the search 
function uiWebview_HighlightAllOccurencesOfString(keyword) { 
    uiWebview_RemoveAllHighlights(); 
    uiWebview_HighlightAllOccurencesOfStringForElement(document.body, keyword.toLowerCase()); 
} 

// helper function, recursively removes the highlights in elements and their childs 
function uiWebview_RemoveAllHighlightsForElement(element) { 
    if (element) { 
     if (element.nodeType == 1) { 
      if (element.getAttribute("class") == "uiWebviewHighlight") { 
       var text = element.removeChild(element.firstChild); 
       element.parentNode.insertBefore(text,element); 
       element.parentNode.removeChild(element); 
       return true; 
      } else { 
       var normalize = false; 
       for (var i=element.childNodes.length-1; i>=0; i--) { 
        if (uiWebview_RemoveAllHighlightsForElement(element.childNodes[i])) { 
         normalize = true; 
        } 
       } 
       if (normalize) { 
        element.normalize(); 
       } 
      } 
     } 
    } 
    return false; 
} 

// the main entry point to remove the highlights 
function uiWebview_RemoveAllHighlights() { 
    uiWebview_SearchResultCount = 0; 
    uiWebview_RemoveAllHighlightsForElement(document.body); 
} 

function uiWebview_ScrollTo(idx) { 
    var scrollTo = document.getElementById("SEARCH WORD" + idx); 
    if (scrollTo) scrollTo.scrollIntoView(); 
} 

そして、私のViewController.swiftファイル内を、私はジャバスクリプトファイルをロードし、検索を実行します

func highlightAllOccurencesOfString(str:String) -> Int { 
     let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js") 

     var jsCode = "" 

     do{ 

      jsCode = try String(contentsOfFile: path!) 

       myWebView.stringByEvaluatingJavaScript(from: jsCode) 

     let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(str)')" 

     myWebView.stringByEvaluatingJavaScript(from: startSearch) 

     let result = myWebView.stringByEvaluatingJavaScript(from: "uiWebview_SearchResultCount")! 

     }catch 
     { 
      // do something 

     } 



     return Int(result)! 


    } 

これは、webview内の文字列のすべての出現を見つけてハイライトしますが、最初のオカレンスのみをハイライトします。 例えば、私が呼ぶこのコードで：

Helloフランク、Helloノアは

しかし、私はこの結果たい：

highlightAllOccurencesOfString(str:"Hello") 

"こんにちは" のすべてのインスタンスは、WebViewの中で強調表示されます

を

Helloフランク、こんにちはノア

jav検索文字列の最初のオカレンスのみをハイライトするためのスクリプトコード？

更新：私は下記のJonLucaの答えを試しましたが、何も強調表示されませんでした。

すべてのヘルプは大幅に

Answer 1

をいただければ幸い関数は、要素がテキストノードである、とされていない場合、それはその人の子供の一人一人に自分自身を呼び出す場合、それはチェックの木のように動作しています。

ハイライト表示する要素が1つ見つかったことを発信者に知らせてから退席させる必要があります。

また、これを検索する方法では、単語の「最初の」出現がdocument.bodyツリー内の最初の出現であるとは限りません。

ハイライトする単語が見つかった場合はtrueを返し、そうでない場合はfalseを返します。それは、それがその検索を続けるのを妨げるでしょう。

function uiWebview_HighlightAllOccurencesOfStringForElement(element, keyword) { 
    if (element) { 
     if (element.nodeType == 3) { // Text node 

      var count = 0; 
      var elementTmp = element; 

      var value = elementTmp.nodeValue; // Search for keyword in text node 
      var idx = value.toLowerCase().indexOf(keyword); 

      if (idx < 0) { 
       return false; 
      } 

      count++; 
      elementTmp = document.createTextNode(value.substr(idx + keyword.length)); 


      uiWebview_SearchResultCount += count; 

      var index = uiWebview_SearchResultCount; 

      var value = element.nodeValue; // Search for keyword in text node 
      var idx = value.toLowerCase().indexOf(keyword); 

      if (idx < 0) { 
       return false; 
      } // not found, abort 

      //we create a SPAN element for every parts of matched keywords 
      var span = document.createElement("span"); 
      var text = document.createTextNode(value.substr(idx, keyword.length)); 
      span.appendChild(text); 

      span.setAttribute("class", "uiWebviewHighlight"); 
      span.style.backgroundColor = "yellow"; 
      span.style.color = "black"; 

      index--; 
      span.setAttribute("id", "SEARCH WORD" + (index)); 
      //span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount); 

      //element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount); 

      //uiWebview_SearchResultCount++; // update the counter 

      text = document.createTextNode(value.substr(idx + keyword.length)); 
      element.deleteData(idx, value.length - idx); 

      var next = element.nextSibling; 
      //alert(element.parentNode); 
      element.parentNode.insertBefore(span, next); 
      element.parentNode.insertBefore(text, next); 
      element = text; 
      return true; 


     } 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--) { 
        if (uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i], keyword)) { 
         return true; 
        } 
       } 
      } 
     } 
    } 
} 

これは正しいことが保証されているわけではなく、すべてのユースケースをカバーしています。しかし、私は強調表示された単語を最初に見つけたときにそれを返しました。実行を停止し、他の単語を強調表示しないでください。

これが機能するかどうかを教えてください。私は今すぐテストする能力がありません。