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.

Any ideas? Clues? I'd appreciate even a half-educated direction to aim at. — Turnsole, Mar 20 '12 at 20:27

Fedir Tsapana · Answer 1 · 2013-08-07T12:18:24.123

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);

            }

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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:

Hope this helps.

Sure thing - did you try the "disabling links" approach? If you did, what did not work? — icyrock.com, Mar 27 '12 at 01:01
I read that thread. My problem is with Maps links. Urls and phone numbers have a pretty straightforward regex pattern so something like that would work okay; but detecting an address in text is a non-trivial task that is already being solved by whatever is overlaying the invisible links on the view. I really just want to figure out how those links are getting there and make them visible. — Turnsole, Mar 27 '12 at 20:53

Make Webview's auto links visible

2 Answers2

Linked