android – get Text out of webview-ThrowExceptions

Exception or error:

In my application, I am showing epub HTML files in webview using EPUBLIB.
My problem is that I want to use bookmark functionality for my epub reader. For that I want to fetch text from webview which is showing page from my epub’s HTML file and then use that text in my bookmark activity to show the user what they have bookmarked.
How can I achieve this?

How to solve:

Getting the plain text content from a webview is rather hard. Basically, the android classes don’t offer it, but javascript does, and Android offers a way for javascript to pass the information back to your code.

Before I go into the details, do note that if your html structure is simple, you might be better off just parsing the data manually.

That said, here is what you do:

  1. Enable javascript
  2. Add your own javascript interface class, to allow the javascript to communicate with your Android code
  3. Register your own webviewClient, overriding the onPageFinished to insert a bit of javascript
  4. In the javascript, acquire the element.innerText of the tag, and pass it to your javascript interface.

To clarify, I’ll post a working (but very rough) code example below. It displays a webview on the top, and a textview with the text-based contents on the bottom.


import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

public class WebviewTest2Activity extends Activity {
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {

        WebView webView = (WebView) findViewById(;
        TextView contentView = (TextView) findViewById(;

        /* An instance of this class will be registered as a JavaScript interface */ 
        class MyJavaScriptInterface 
            private TextView contentView;

            public MyJavaScriptInterface(TextView aContentView)
                contentView = aContentView;


            public void processContent(String aContent) 
                final String content = aContent;
                    public void run() 

        webView.addJavascriptInterface(new MyJavaScriptInterface(contentView), "INTERFACE"); 
        webView.setWebViewClient(new WebViewClient() { 
            public void onPageFinished(WebView view, String url) 


Using the following main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:orientation="vertical" >

        android:layout_weight="0.5" />

        android:layout_weight="0.5" />



    "(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
     new ValueCallback<String>() {
        public void onReceiveValue(String html) {
            Log.d("HTML", html); 
            // code here


The only thing that comes to my mind in this case is to use javascript. Doing a quick search I found android.webkit.WebView.addJavascriptInterface.

You want to study the “addJavascriptInterface” which in the end will help you solve the problem


The solution provided above provides the text using innerText property which will return you all the text in the webView. The solution that I propose below will help you extract the text from visible part of the webView on the screen.

Step 1: It requires the help of javaScript, hence first enable the javascript.

webView.addJavascriptInterface(new IJavascriptHandler(getActivity().getApplicationContext()),     "Android"); //if your class extends a Fragment class


view.addJavascriptInterface(new IJavascriptHandler(this), "Android"); //if your class extends Activity.

Step 2: Create a javaInterface inner class.

final class IJavascriptHandler {

    Context mContext;
    IJavascriptHandler(Context c) {
    mContext = c;

//API 17 and higher required you to add @JavascriptInterface as mandatory before your method.   
public void processContent(String aContent) 
   //this method will be called from within the javascript method that you will write.
   final String content = aContent;
   Log.e("The content of the current page is ",content);

Step 3: Now you have to add the javascript method. You’ll write the method as a string and then load it. The method returns the text based on the parameter provided to it. So, you would need 2 strings. One will load the javascript method and the other will call it.

Method to load the javascript method.

String javaScriptToExtractText = "function getAllTextInColumn(left,top,width,height){"
                +   "if(document.caretRangeFromPoint){"
                +   "var caretRangeStart = document.caretRangeFromPoint(left, top);"
                +   "var caretRangeEnd = document.caretRangeFromPoint(left+width-1, top+height-1);"
                +   "} else {"
                +   "return null;"
                +   "}"
                +   "if(caretRangeStart == null || caretRangeEnd == null) return null;"
                +   "var range = document.createRange();"
                +   "range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);"
                +   "range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);"
                +   "return range.toString();};";

Method to call the above function.

String javaScriptFunctionCall = "getAllTextInColumn(0,0,100,100)";

//I've provided the parameter here as 0,0 i.e the left and top offset and then 100, 100 as width and height. So, it'll extract the text present in that area.

Step 4: Now, you need to load the above 2 javascripts.

webView.loadUrl("javascript:"+ javaScriptToExtractText);
//this will load the method.

//this will call the loaded javascript method.



Why don’t you fetch the text with EPUBLIB from the book directly?

You got that html with the help of EPUBLIB isn’t it? How did you put that in the webvieuw? I see no example.

Leave a Reply

Your email address will not be published. Required fields are marked *