如何在UIWebView中突出显示第一次出现的字符串？

Question

我使用下面的javascript代码中查找的字符串中出现的所有的UIWebView：

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文件，我加载javascript文件并执行搜索像这样：

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)! 


    } 

这发现并突出显示在web视图中的字符串的所有事件，但我只想要第一个突出显示。 例如，使用此代码时，我打电话：

highlightAllOccurencesOfString(str:"Hello") 

的“你好”，在网页视图被突出显示所有实例：

Hello弗兰克，Hello诺亚

但我想这个结果：

Hello Frank，Hello Noah

如何修改jav ascript代码只突出搜索字符串的第一个出现？

更新：我试过JonLuca的答案，但没有突出显示。

任何帮助，将不胜感激

Answer 1

的功能运行像一棵树，它会检查，如果该元素是一个文本节点，如果没有它自称其孩子的每一个。

你必须让来电者知道你发现了一个突出显示的元素，然后离开。

此外，通过它进行搜索的方式并不能保证您认为该单词的“第一”出现将是document.body树中的第一次出现。

在代码中，如果发现单词突出显示，则返回true;否则返回false。这将阻止它继续搜索。像这样修改js：

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; 
        } 
       } 
      } 
     } 
    } 
} 

这不能保证是正确的，或者它涵盖了所有的用例。但是，在第一次找到突出显示的单词时，我已将其返回true。它应该停止执行并且不会突出显示任何其他单词。

让我知道这是否有效 - 我现在没有能力测试它。