Make Webview's auto links visible

Question

A Webview will display links in the content HTML as having blue underlines. So if you have something in the HTML like

<a href="...">blah blah</a>

... it is clearly visible as a link.

The Webview also allows you to click on phone numbers and addresses (even if those are just text in the HTML, not links) to launch the Dialer or Maps.

How can one get Webview to display those (Linkify, probably) links with underlines etc? It's easy enough in a TextView since one can get the spans from a TextView and style them, but Webview doesn't expose any way to retrieve that data... at least not that I can see looking through the docs.

Answer 1

Given this:

• http://code.google.com/p/android/issues/detail?id=742

it still doesn't seem to be a way to do this from Java directly. One thing that might work is to write some JavaScript code and run it after page is loaded, e.g. as given here:

• In Android Webview, am I able to modify a webpage's DOM?

Here's an example of a similar thing:

• Disabling links in android WebView

where the idea is to disable links. You may be able to use a similar approach to add some CSS, including underlining. A couple of other SOqs / links that might help:

• Android: Injecting Javascript into a Webview outside the onPageFinished Event
• Android: Injecting Javascript into a Webview outside the onPageFinished Event
• http://iphoneincubator.com/blog/windows-views/how-to-inject-javascript-functions-into-a-uiwebview
• Injecting Javascript into a Webview outside the onPageFinished Event (Using DatePicker to set a date on an input of a WebView)

Hope this helps.

Answer 2

Here is some JS code which can be injected to linkify phone numbers, emails and urls:

            function linkify() {
                linkifyTexts(linkifyPhoneNumbers);
                linkifyTexts(linkifyEmails);
                linkifyTexts(linkifyWebAddresses1);
                linkifyTexts(linkifyWebAddresses2);
            }
            function linkifyPhoneNumbers(text) {
                text = text.replace(/\b\+?[0-9\-]+\*?\b/g, '<a href="tel:$&">$&</a>');
                return text;
            }
            function linkifyEmails(text) {
                text = text.replace(/(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim, '<a href="mailto:$1">$1</a>');
                return text;
            }
            function linkifyWebAddresses1(text) {
                text = text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '<a href="$1" target="_blank">$1</a>');
                return text;
            }
            function linkifyWebAddresses2(text) {
                text = text.replace(/(^|[^\/])(www\.[\S]+(\b|$))/gim, '$1<a href="http://$2" target="_blank">$2</a>');
                return text;
            }

            var linkifyTexts = function(replaceFunc)
            {
                var tNodes = [];
                getTextNodes(document.body,false,tNodes,false);                              
                var l = tNodes.length;
                while(l--)
                {
                    wrapNode(tNodes[l], replaceFunc);
                }
            }
            function getTextNodes(node, includeWhitespaceNodes,textNodes,match) {
                if (node.nodeType == 3) {
                    if (includeWhitespaceNodes || !/^\s*$/.test(node.nodeValue)) {
                        if(match){
                            if(match.test(node.nodeValue))
                                textNodes.push(node);
                        }
                        else {
                            textNodes.push(node);
                        }
                    }
                } else {
                    for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                        var subnode = node.childNodes[i];
                        if (subnode.nodeName != "A") {
                            getTextNodes(subnode,includeWhitespaceNodes,textNodes,match);
                        }
                    }
                }

            }
            function wrapNode(n, replaceFunc) {
                var temp = document.createElement('div');
                if(n.data)
                    temp.innerHTML = replaceFunc(n.data);
                else{
                    //whatever
                }
                while (temp.firstChild) {
                    n.parentNode.insertBefore(temp.firstChild,n);

                }
                n.parentNode.removeChild(n);

            }