How Susi linkifies the link?

Susi responses contains links to open street maps as of now. Previously the UI was not able to handle the links gracefully.

0c013146-4cf6-11e6-91a7-57015406412e

The links are not linkified properly. Suppose if i want to check the contents on the link, i need to copy the link text and check out the contents in it, which is a very bad UX. This blog post explains on how Susi deals with linkifying the links gracefully without using any third party plugins or JS libs.

When I started off with the process of fixing this, i searched for exisiting js library which can help me do this job. I came across Linkify JS library for adding the Hyperlinks to texts and avoiding the plain URL displays. But found that the library is pretty huge and quite convoluted to implement it. Instead of using this, i tried out solving this issue with simple regular expressions.

How I implemented this? 

I made a generic check for the linkification. Most of the URLs start with the following protocols.

  • http://
  • https://
  • ftp://
  • www.
  • mailto::

The following regular expression checks for URLs starting with http://, https://, or ftp://

/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;

The following regular expression for URLs starting with “www.” (without // before it, or it’d re-link the ones done above)

/(^|[^\/])(www\.[\S]+(\b|$))/gim;

The following regular expressions change email addresses to mailto:: links

/(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;

These regular expressions follow the format for each of the different URL formats mentioned, places the link into the hrefs.

//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = replacedText.replace(replacePattern1, '<a href="$1" target="_blank">Click Here!</a>');

//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$3$</a>');

//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$3$</a>');

At the same time the text is being wrapped inside the pre tags. Here is the final result without using any libraries and simply fixing the issue using three different regular expressions.

b9dd6c06-4d39-11e6-907d-29945fc8f4c5

 

How Susi linkifies the link?