Convert links in HTML to anchors

Question

I've a HTML text for which I need to replace links (like www.so.com) with anchors.

The input is:

<p>Hi I have a nice website on www.so.com and would...</p>
<p>Click <a href='http://www.so.com'>this link</a></p>

Output should return:

<p>Hi I have a nice website on <a href='www.so.com'>www.so.com</a> and would...</p>
<p>Click <a href='http://www.so.com'>this link</a></p>

The tricky part are the anchors already in the HTML text.

I'm struggling with the solution I have got so far. The first time the filter replaces the links with anchors, but also the second time...

.filter('autolink', ['$sanitize', function ($sanitize) {
var LINKY_URL_REGEXP =
    /((ftp|https?):\/\/|(www\.)|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>"\u201d\u2019]/i,
    MAILTO_REGEXP = /^mailto:/i;

return function (text, target, attributes) {
    if (!text) return text;
    var match;
    var raw = text;
    var html = [];
    var url;
    var i;
    while ((match = raw.match(LINKY_URL_REGEXP))) {
        // We can not end in these as they are sometimes found at the end of the sentence
        url = match[0];
        // if we did not match ftp/http/www/mailto then assume mailto
        if (!match[2] && !match[4]) {
            url = (match[3] ? 'http://' : 'mailto:') + url;
        }
        i = match.index;
        addText(raw.substr(0, i));
        addLink(url, match[0].replace(MAILTO_REGEXP, ''));
        raw = raw.substring(i + match[0].length);
    }
    addText(raw);
    return html.join('');

    function addText(text) {
        if (!text) {
            return;
        }
        html.push(text);
    }

    function addLink(url, text) {
        var key;
        html.push('<a ');
        if (angular.isFunction(attributes)) {
            attributes = attributes(url);
        }
        if (angular.isObject(attributes)) {
            for (key in attributes) {
                html.push(key + '="' + attributes[key] + '" ');
            }
        } else {
            attributes = {};
        }
        if (angular.isDefined(target) && !('target' in attributes)) {
            html.push('target="',
                target,
                '" ');
        }
        html.push('href="',
            url.replace(/"/g, '&quot;'),
            '">');
        addText(text);
        html.push('</a>');
    }
};

Seen [How to replace plain URLs with links?](http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links) — Alex K., Nov 18 '15 at 14:53
I use Tivie regex code and create this script. http://jsfiddle.net/ywpcfkdh/ — Mohammad, Nov 18 '15 at 15:47

score 0 · Answer 1 · answered Nov 18 '15 at 15:01

You can borrow showdown.js regex for parsing links. It will parse plaintext and ignore HTML.

\b(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])

regex101.com test

Keep in mind that it will missparse in the following (strangely formed html) cases:

<a href="www.google.com ">bla</a>
<a href="www.google.com\n">bla</a> (\n is a newline)

score 0 · Answer 2 · edited May 23 '17 at 12:23

It's a bit tricky problem as both textual link & Anchor tag co-exists. I tried to solve this problem. Please have a look at the code below. You can also view the same on Codepen.

Input string (var plainText)

<p>Hola! This is my sincere attempt on www.stackoverflow.com to solve this problem.</p><p>Click <a href=\'https://stackoverflow.com/questions/33783154/convert-links-in-html-to-anchors\'>here</a> to view my answer.</p><p>Thanks for your time!</p><p><a href="https://stackoverflow.com/">Stackoverflow rocks!</a></p>

Output string (var updatedTextAnchorify)

<p>Hola! This is my sincere attempt on <a href="http://www.stackoverflow.com">www.stackoverflow.com</a> to solve this problem.</p><p>Click <a href="https://stackoverflow.com/questions/33783154/convert-links-in-html-to-anchors">here</a> to view my answer.</p><p>Thanks for your time!</p><p><a href="https://stackoverflow.com/">Stackoverflow rocks!</a></p>

Code Snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Anchorify</title>
</head>
<body>
  <script>
  (function() {
    if (!String.anchorify) {
      String.prototype.anchorify = function() {
        var
          // http://, https://, ftp://
          urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim,
          // www., Sans http:// or https://
          pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim,
          // Email addresses
          emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

        return this
          .replace(urlPattern, '<a href="$&">$&</a>')
          .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
          .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
      };
    }

    var
      // Initial text to be converted/anchorified
      // initialText =
      plainText = '<p>Hola! This is my sincere attempt on www.stackoverflow.com to solve this problem.</p><p>Click <a href=\'https://stackoverflow.com/questions/33783154/convert-links-in-html-to-anchors\'>here</a> to view my answer.</p><p>Thanks for your time!</p><p><a href="https://stackoverflow.com/">Stackoverflow rocks!</a></p>',
      // plainText = initialText.replace(/\r?\n|\r/gim, ''),
      matchesObj = {},
      anchorTagPattern = /(<a href=(?:'|")([^"]+)(?:'|")>([^<]+)<\/a>)/gim,
      updatedText = plainText.replace(anchorTagPattern, function () {
        var slice = Array.prototype.slice.call(arguments, 1, 4);
        matchesObj[slice[1]] = '<a href="' + slice[1] + '">' + slice[2] + '</a>';
        return slice[1];
      }),
      updatedTextAnchorify = updatedText.anchorify();

    // Iterate
    for (var property in matchesObj) {
      if (matchesObj.hasOwnProperty(property)) {
        var replaceStr = '<a href="' + property + '">' + property + '</a>';
        updatedTextAnchorify = updatedTextAnchorify.replace(replaceStr, matchesObj[property])
      }
    }

    // Write to the Document
    document.write(updatedTextAnchorify);
  })();
  </script>
</body>
</html>

Also, have a look at this Stackoverflow answer which clearly explains why rolling your own regular expression to parse URLs is a terrible idea & also gives some helpful references.

To test your own input string, just change var plainText.

I hope this helps!

If this helped & you think is the right answer, please **accept** as the **answer**. Thanks! — krishnaxv, Nov 20 '15 at 22:57

Convert links in HTML to anchors

2 Answers2