Android webview: highlight a specific word in a page using javascript?

Question

i am using a webview inside my android application. I would like to know if it is possible to highlight or underline a specific word/sentence/paragraph in a loaded page using code done in javascript?

thanks

Answer 1

Why can't you try this? titleWebView is the WebView that has the html loaded or to be loaded. searchText should contain the text to be searched. I constructed a dialog to get the search terms from the user and reloaded the webpage each time the user hits the search. All the terms containing the searchText is highlighted (light green on my Nexus One). Hope this helps.

titleWebView.setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {
        if (searchText != null && !searchText.equals("")) {
            int i = titleWebView.findAll(searchText);
            Toast.makeText(getApplicationContext(), "Found " + i + " results !",
                Toast.LENGTH_SHORT).show();
            try {
                Method m = WebView.class.getMethod("setFindIsUp", Boolean.TYPE);
                m.invoke(titleWebView, true);
            } catch (Throwable ignored) {
            }
            searchText = "";
        }
    }
});

Answer 2

You should look at this page. Do a view source.

They use pure Javascript--not even jQuery--to highlight particular words on the webpage.

Basically they load all of the text they want to search through into a variable and continuously find the indexOf the search term they want to highlight. When they find the index of the term, they build a new string with everything before that index + a <span class="highlighted"> + the search term + </span>. Then they continue searching. Once they've searched and rebuilt all the text they replace the old text in the DOM with the new text.

They also have some CSS along the lines of .highlighted { background-color: yellow; }