chrisfang的Excel大全

Webview查找关键词并高亮显示

2015-01-15
作者: chrisfang | 分类: iOS开发移动开发 | 阅读: 4,004 次浏览 | Tags:
声明: 本站文章均属原创,转载时请标明出处

在移动端用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代码在网页中的应用。

01

一条评论

  1. 七夕、说道:

    方版,你怎么啥都会呢。。。
    Niubility!!

七夕、进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>