ios 使用webview 查找_Webview查找关键词并高亮显示

在移动端用Webview加载网页，然后要在其中搜索查找某个关键词，并在网页中高亮显示这些被找到的关键词，要实现这样一个效果，Android和iOS平台下有各自不同的实现方式。

在Android的Webview当中，提供了Webview.FindAll方法就可以直接实现这个功能。在B4A当中没有直接提供FindAll，但可以利用Reflection库来解决：

Sub FindAll (w As WebView, S As String) As Int

Dim r As Reflector

r.Target = w

Return r.RunMethod2("findAll", S, "java.lang.String")

End Sub

所以在Android当中，这事儿就是这么简单。

而在iOS当中，没有提供FindAll方法，比较可行的方案是通过额外的JavaScript代码来实现。

可以提供关键词高亮功能的js代码如下：

var uiWebview_SearchResultCount = 0;

function uiWebview_HighlightAllOccurencesOfStringForElement(element,keyword) {

if (element) {

if (element.nodeType == 3) { // Text node

while (true) {

//if (counter < 1) {

var value = element.nodeValue; // Search for keyword in text node

var idx = value.toLowerCase().indexOf(keyword);

if (idx < 0) break; // not found, abort

//(value.split);

//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";

uiWebview_SearchResultCount++; // update the counter

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 = text;

window.scrollTo(0,span.offsetTop);

}

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

}

这段代码当中有两对函数，uiWebview_HighlightAllOccurencesOfString是关键词高亮显示，uiWebview_RemoveAllHighlights是移除高亮显示，可以根据需要调用。

这段JavaScript代码可以通过stringByEvaluatingJavaScriptFromString方法加载到Webview当中，并且执行函数。

具体要在B4i中实现可以这样操作：把这段代码保存在文件当中，并存放在File.DirAssets中。

通过代码读取文件中的js代码(注意文件编码格式)，然后利用B4i的NativeObject(类似B4A的Reflector)来使用stringByEvaluatingJavaScriptFromString方法把js代码加载到Webview当中：

Dim no As NativeObject = webview1

Dim scripttext As String =File.ReadString(File.DirAssets,"test.js")

no.RunMethod("stringByEvaluatingJavaScriptFromString:",Array(scripttext))

先把js代码加载到网页，然后就能运行其中关键词高亮的函数uiWebview_HighlightAllOccurencesOfString(keyword)，代码如下：

scripttext ="uiWebview_HighlightAllOccurencesOfString('" & keyword & "');"

no.RunMethod("stringByEvaluatingJavaScriptFromString:",Array(scripttext))

这样就完成了，效果如下图所示。类似的方法，也可以支持其他JS代码在网页中的应用。