How to replace plain URLs with links, with example?

Question

I've nearly got this working. I wanted to know if there was a much better way.

function replaceURLWithHTMLLinks(text) {
    text = text.replace(/a/g, "--ucsps--");
    text = text.replace(/b/g, "--uspds--");
    var arrRegex = [
        /(\([^)]*\b)((?:https?|ftp|file):\/\/[-A-Za-z0-9+&@#\/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#\/%=~_()|])(\))/ig,
        /(\([^)]*\b)((?:https?|ftp|file):\/\/[-A-Za-z0-9+&@#\/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#\/%=~_()|])(.?\b)/ig,
        /()(\b(?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])(.?\b)/ig];
    for (i = 0; i < arrRegex.length; i++) {
        text = text.replace(arrRegex[i], "$1a$2b$3");
    }
    text = text.replace(/a([^b]*)b/g, "<a href='$1'>$1</a>");
    text = text.replace(/--ucsps--/g, "a");
    text = text.replace(/--uspds--/g, "b");
    return text;
}
var elm = document.getElementById('trythis');
elm.innerHTML = replaceURLWithHTMLLinks(elm.innerHTML);

Any thoughts?

Thought: _wow that looks messy_. Did you have any other questions? — Halcyon, Oct 23 '13 at 16:18
This would be more appropriate on http://codereview.stackexchange.com/ — ediblecode, Oct 23 '13 at 16:18
replacing `innerHTML` will be dangerous. Try traversing the tree and replacing only `innerText` of each Element. — Mohsen, Oct 23 '13 at 16:23
It looks like this will never be perfect, there will always be come cases where it would be impossible to weed out the URL. Like for example: (My cruse was bad: http://en.wikipedia.org/wiki/Images_of_me_:(.jpg) — Mike Mestnik, Oct 23 '13 at 16:25
Frits van Campen: I was hoping for constructive criticism, that much I knew already. :) — Mike Mestnik, Oct 23 '13 at 16:27
[codereview](http://codereview.stackexchange.com/questions/33412/how-to-replace-plain-urls-with-links-in-javascript) — Mike Mestnik, Oct 28 '13 at 18:08

score 3 · Accepted Answer · edited Apr 13 '17 at 12:40

Over at CodeReview this question was answered quite splendidly.

function replaceURLWithHTMLLinks(text) {
    var re = /(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/ig;
    return text.replace(re, function(match, lParens, url) {
        var rParens = '';
        lParens = lParens || '';

        // Try to strip the same number of right parens from url
        // as there are left parens.  Here, lParenCounter must be
        // a RegExp object.  You cannot use a literal
        //     while (/\(/g.exec(lParens)) { ... }
        // because an object is needed to store the lastIndex state.
        var lParenCounter = /\(/g;
        while (lParenCounter.exec(lParens)) {
            var m;
            // We want m[1] to be greedy, unless a period precedes the
            // right parenthesis.  These tests cannot be simplified as
            //     /(.*)(\.?\).*)/.exec(url)
            // because if (.*) is greedy then \.? never gets a chance.
            if (m = /(.*)(\.\).*)/.exec(url) ||
                    /(.*)(\).*)/.exec(url)) {
                url = m[1];
                rParens = m[2] + rParens;
            }
        }
        return lParens + "<a href='" + url + "'>" + url + "</a>" + rParens;
    });
}

Note: I had errors with the "@" symbol in the "var re" - I just replaced it with @@

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

0

Guess this question is already answered here

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

edited May 23 '17 at 12:17

Community

1
1

answered Oct 23 '13 at 17:32

R. Oosterholt

7,720
2
53
77

This produces vary unacceptable results. For example: – Mike Mestnik Oct 23 '13 at 17:42
[Fiddle](http://jsfiddle.net/bPtaA/) – Mike Mestnik Oct 23 '13 at 17:43
ok. provider the link because it scored that high. Didn't test it, was just hoping you could use it... – R. Oosterholt Oct 23 '13 at 17:47

How to replace plain URLs with links, with example?

2 Answers2

Linked