如何在android webview上永久突出显示文本？

Question

我正在做 Epub 阅读器并在 android webview 中显示书籍。

目前我可以使用下面的 javascript 突出显示文本

public static String Highlightscript = " <script language=\"javascript\">" +

        "function highlightSelection(){" +
        "var userSelection = window.getSelection();" + 
        "for(var i = 0; i < userSelection.rangeCount; i++)"
        + "  highlightRange(userSelection.getRangeAt(i));" +
         "}" +
        "function highlightRange(range){"+
        "span = document.createElement(\"span\");"+
        "span.appendChild(range.extractContents());"+
        "span.setAttribute(\"style\",\"display:block;background:#ffc570;\");"+
        "range.insertNode(span);}"+
        "</script> ";

当用户点击突出显示时，我会这样做

webView.loadUrl("javascript:highlightSelection()");

这会突出显示文本，我还将突出显示的文本保存在本地数据库中

但是当用户重新打开这本书时，我想显示以前突出显示的文本。我怎样才能做到这一点？

我试图在用户进入页面时查找文本（默认情况下突出显示文本）

webView.findAllAsync(highlightedText);

但是如果高亮的文字太小，比如单词“The”，很多单词会被高亮。

我已经在 SO 上搜索过，但所有问题都没有得到解答 Question 1 和 Question 2

那么还有其他方法可以实现吗？

Answer 1

从根本上说，您必须知道要突出显示 webview 的哪一部分。您不能仅通过存储突出显示的文本来知道这一点（如您所见）。唯一的方法是存储高亮位置的某个版本。

您的答案在您首先显示的用于突出显示文本的代码中。

highlightRange(userSelection.getRangeAt(i));

存储来自 Range 对象的信息。然后，您需要在加载页面时加载此信息。执行与您的 Highlightscript 函数等效的操作，但使用您保存的范围信息。

添加细节以回应评论

查找 Range 接口 (https://developer.mozilla.org/en-US/docs/Web/API/Range)。

当你第一次突出显示范围时，你可以提取起始节点和偏移量以及结束节点和偏移量信息。将其存储在您的数据库中。 （具体如何操作取决于您使用的数据库。）

在您访问该页面时检索适当的信息。使用 document.createRange() 或 Range() 构造函数创建 Range 对象。填写您保存的开始和结束信息。

在您构造的 Range 对象上调用 highlightRange()。