如何在Android WebView上永久突出显示文本? [英] How to highlight text permanently on android webview?

问题描述

我正在做Epub阅读器，并在android webview中显示书.

I am doing Epub reader and showing book inside android webview.

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

At present i can highlight text using below 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> ";

以及当用户单击我突出显示"时

and to when user clicks on highlight i do

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

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

This highlight the text and i also save the highlighted text in local database

但是当用户重新打开书时，我想显示上一个突出显示的文本.我怎样才能做到这一点?

but when user reopens the book i want to show the previous highlighted text . How can i achieve this ?

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

i am trying to find the text when user enters the page(which highlights text by default) by

webView.findAllAsync(highlightedText);

但是如果突出显示的文本太小(如单词"The")，则会突出显示很多单词.

but if highlighted text was too small like word "The" , a lot of words will be highlighted .

我已经搜索过SO，但所有问题均未得到答复问题2

I already searched on SO , but all questions were unanswered Question 1 and Question 2

那么还有其他方法可以实现这一目标吗?

So is there any other way to achieve this?

推荐答案

从根本上讲，您必须知道要突出显示Web视图的哪一部分.您仅通过存储突出显示的文本就无法知道这一点(如您所见).唯一的方法就是存储高光位置的某些版本.

Fundamentally you have to know what part of the webview you want to highlight. You can't know this just by storing the highlighted text (as you've seen). The only way to do it is going to involve storing some version of the location of the highlight.

您的答案就在您为突出显示文本而显示的代码中.

Your answer is in the code you showed for highlighting the text in the first place.

highlightRange(userSelection.getRangeAt(i));

存储Range对象中的信息.然后，您需要在加载页面时加载此信息.执行与您的 Highlightscript 函数相同的功能，但要使用保存的Range信息.

Store information from the Range objects. You'll then need to load this information as you load pages. Do the equivalent of your Highlightscript function, but with the Range information you saved.

添加详细信息以回应评论

查找Range界面( https://developer.mozilla.org/en-US/docs/Web/API/Range ).

Lookup the Range interface (https://developer.mozilla.org/en-US/docs/Web/API/Range).

首次突出显示范围时，可以提取起始节点和偏移量以及结束节点和偏移量信息.将此存储在您的数据库中.(您的操作方式取决于所使用的数据库.)

When you first highlight the range, you can extract the starting node and offset and ending node and offset information. Store this in your database. (How you do that depends on what database you're using.)

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

Retrieve the appropriate information when you visit the page. Create Range objects using document.createRange() or the Range() constructor. Fill in the start and end information you saved.

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

Call highlightRange() on the Range objects you constructed.

这篇关于如何在Android WebView上永久突出显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！