Android WebView点击元素高亮标记及div内容提取实现咨询

我来给你梳理一下具体的实现思路，分两步走：先搞定点击高亮效果，再处理内容提取，核心是通过WebView和JS的配合来实现，比单纯依赖Jsoup更灵活准确~

一、实现点击div元素的高亮效果 #

核心思路是给WebView注入自定义JS代码，监听div的点击事件，动态添加/移除高亮样式，同时把选中元素的ID同步给Android端。

1. 配置WebView基础设置 #

首先得确保WebView启用JavaScript，否则注入的JS代码没法运行：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true); // 适配部分动态渲染的页面

2. 注入JS实现点击高亮与事件回调 #

在页面加载完成后，注入JS代码来绑定点击事件和添加高亮样式：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        
        String injectJs = "// 记录上一个高亮的元素\n" +
                          "var lastHighlighted = null;\n" +
                          "// 给所有div绑定点击事件\n" +
                          "document.querySelectorAll('div').forEach(function(div) {\n" +
                          "    div.addEventListener('click', function() {\n" +
                          "        // 移除上一个元素的高亮样式\n" +
                          "        if(lastHighlighted) {\n" +
                          "            lastHighlighted.classList.remove('highlight');\n" +
                          "        }\n" +
                          "        // 给当前点击的div添加高亮\n" +
                          "        this.classList.add('highlight');\n" +
                          "        lastHighlighted = this;\n" +
                          "        // 把当前div的ID传给Android端\n" +
                          "        Android.onDivSelected(this.id);\n" +
                          "    });\n" +
                          "});\n" +
                          "// 定义高亮样式（可按需修改）\n" +
                          "var style = document.createElement('style');\n" +
                          "style.textContent = '.highlight { border: 2px solid #ff4040; background-color: rgba(255, 64, 64, 0.15); }';\n" +
                          "document.head.appendChild(style);";
        
        // 注入JS代码到WebView
        webView.evaluateJavascript(injectJs, null);
    }
});

3. 配置JavascriptInterface接收JS回调 #

在Android端定义一个交互接口，让JS可以把选中的div ID传递过来：

// 添加JS交互接口，"Android"是JS调用时的标识
webView.addJavascriptInterface(new DivSelectionCallback(), "Android");

// 回调类，处理JS传递的选中信息
private class DivSelectionCallback {
    @JavascriptInterface
    public void onDivSelected(String divId) {
        // 保存选中的div ID，后续提取内容时用
        Log.d("WebViewDemo", "选中的div ID: " + divId);
        // 也可以直接在这里触发内容提取逻辑
        extractSelectedDivContent(divId);
    }
}

二、提取已标记div的内容 #

提取内容有两种常用方式，推荐第一种（直接用JS获取），因为它能准确获取WebView当前页面的动态内容；如果必须用Jsoup，也可以按第二种方式来做。

方式1：通过JS直接提取内容（推荐） #

利用JS获取选中div的文本或HTML内容，再返回给Android端：

private void extractSelectedDivContent(String divId) {
    // 构造JS代码，获取div的文本内容（需要HTML的话可以换成innerHTML）
    String extractJs = "var targetDiv = document.getElementById('" + divId + "');\n" +
                       "targetDiv ? targetDiv.textContent.trim() : '';";
    
    webView.evaluateJavascript(extractJs, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String result) {
            // JS返回的字符串会带双引号，需要去除
            String content = result.replace("\"", "");
            Log.d("WebViewDemo", "提取的内容: " + content);
            // 这里可以把内容展示到UI上，比如TextView
        }
    });
}

方式2：结合Jsoup提取内容 #

如果一定要用Jsoup，需要先获取WebView当前页面的完整HTML，再用Jsoup解析：

private void extractWithJsoup(String savedDivId) {
    // 获取当前页面的完整HTML
    webView.evaluateJavascript("document.documentElement.outerHTML;", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String htmlStr) {
            // 去除字符串前后的双引号
            String pageHtml = htmlStr.replace("\"", "");
            // 用Jsoup解析HTML
            Document doc = Jsoup.parse(pageHtml);
            Element targetDiv = doc.getElementById(savedDivId);
            if (targetDiv != null) {
                String content = targetDiv.text();
                Log.d("JsoupDemo", "提取的内容: " + content);
            }
        }
    });
}

注意事项 #

• 如果你需要支持div以外的元素，只需要把document.querySelectorAll('div')改成对应的选择器（比如'*'选中所有元素）
• 高亮样式可以完全自定义，比如修改颜色、边框粗细、背景透明度等
• 若页面有动态加载的内容（比如滚动加载），需要在内容加载完成后重新注入JS，或者使用MutationObserver监听DOM变化来自动绑定事件

内容的提问来源于stack exchange，提问作者EAK TEAM