Android webview:使用javascript突出显示页面中的特定单词？

Android WebView 中突出显示页面特定单词的实现

基础概念

在 Android WebView 中突出显示特定单词，通常是通过 JavaScript 操作 DOM 来实现的。WebView 提供了 evaluateJavascript() 方法，允许我们在原生代码中执行 JavaScript 代码来修改网页内容。

实现方法

1. 基本实现方案

// 在 WebView 加载完成后调用此方法
private void highlightText(WebView webView, String searchText) {
    String javascriptCode = 
        "(function() {" +
        "   var searchText = '" + searchText + "';" +
        "   var regex = new RegExp(searchText, 'gi');" +
        "   var elements = document.getElementsByTagName('*');" +
        "   for (var i = 0; i < elements.length; i++) {" +
        "       var element = elements[i];" +
        "       for (var j = 0; j < element.childNodes.length; j++) {" +
        "           var node = element.childNodes[j];" +
        "           if (node.nodeType === 3) {" + // 文本节点
        "               var text = node.nodeValue;" +
        "               var replacedText = text.replace(regex, function(match) {" +
        "                   return '<span style=\"background-color: yellow;\">' + match + '</span>';" +
        "               });" +
        "               if (replacedText !== text) {" +
        "                   var newNode = document.createElement('span');" +
        "                   newNode.innerHTML = replacedText;" +
        "                   element.replaceChild(newNode, node);" +
        "               }" +
        "           }" +
        "       }" +
        "   }" +
        "})();";
    
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        webView.evaluateJavascript(javascriptCode, null);
    } else {
        webView.loadUrl("javascript:" + javascriptCode);
    }
}

2. 更高效的实现方案（使用 TreeWalker）

private void highlightTextEfficient(WebView webView, String searchText) {
    String javascriptCode = 
        "(function() {" +
        "   var searchText = '" + searchText + "';" +
        "   var regex = new RegExp(searchText, 'gi');" +
        "   var treeWalker = document.createTreeWalker(" +
        "       document.body, " +
        "       NodeFilter.SHOW_TEXT, " +
        "       { acceptNode: function(node) { " +
        "           return regex.test(node.nodeValue) ? " +
        "               NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; " +
        "       }}, " +
        "       false" +
        "   );" +
        "   var textNodes = [];" +
        "   while(treeWalker.nextNode()) {" +
        "       textNodes.push(treeWalker.currentNode);" +
        "   }" +
        "   for (var i = 0; i < textNodes.length; i++) {" +
        "       var node = textNodes[i];" +
        "       var parent = node.parentNode;" +
        "       var text = node.nodeValue;" +
        "       var replacedText = text.replace(regex, function(match) {" +
        "           return '<span class=\"highlight\" style=\"background-color: yellow;\">' + match + '</span>';" +
        "       });" +
        "       var newNode = document.createElement('span');" +
        "       newNode.innerHTML = replacedText;" +
        "       parent.replaceChild(newNode, node);" +
        "   }" +
        "})();";
    
    webView.evaluateJavascript(javascriptCode, null);
}

清除高亮

private void clearHighlights(WebView webView) {
    String javascriptCode = 
        "(function() {" +
        "   var highlights = document.getElementsByClassName('highlight');" +
        "   while (highlights.length > 0) {" +
        "       var highlight = highlights[0];" +
        "       var parent = highlight.parentNode;" +
        "       parent.replaceChild(document.createTextNode(highlight.textContent), highlight);" +
        "       parent.normalize();" +
        "   }" +
        "})();";
    
    webView.evaluateJavascript(javascriptCode, null);
}

应用场景

文档阅读器中的搜索功能
教育类应用中的重点标记
浏览器应用中的页面内搜索
内容审核工具中的关键词标记

常见问题及解决方案

1. 性能问题

问题原因：当页面内容很多时，遍历所有DOM节点会导致性能下降。

解决方案：

使用TreeWalker API（如上面的高效方案）
限制搜索范围（如只在特定元素内搜索）
分批处理大文档

2. 样式冲突

问题原因：高亮样式可能被页面原有CSS覆盖。

解决方案：

使用更具体的选择器
添加!important规则
使用内联样式

3. 特殊字符处理

问题原因：搜索文本包含特殊字符可能导致正则表达式错误。

解决方案：

// 在Java端对搜索文本进行转义
String escapedSearchText = searchText.replaceAll("([\\\\\\.\\[\\{\\(\\*\\+\\?\\^\\$\\|])", "\\\\$1");

4. 动态内容不更新

问题原因：页面动态加载内容后，高亮不会自动应用。

解决方案：

监听DOM变化并重新应用高亮
使用MutationObserver API

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            // 重新应用高亮
        }
    });
});
observer.observe(document.body, { childList: true, subtree: true });