如何用链接替换纯 URL，例如？ [复制]答案

【问题标题】：How to replace plain URLs with links, with example? [duplicate]如何用链接替换纯 URL，例如？ [复制]
【发布时间】：2013-11-02 01:02:29
【问题描述】：

我几乎完成了这项工作。我想知道是否有更好的方法。

Root problem

Fiddle

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

有什么想法吗？

【问题讨论】：

想法：哇，看起来很乱。您还有其他问题吗？
这在codereview.stackexchange.com上会更合适
替换 innerHTML 会很危险。尝试遍历树并仅替换每个元素的 innerText。
看起来这永远不会完美，总会出现无法清除 URL 的情况。例如：（我的克鲁斯很糟糕：en.wikipedia.org/wiki/Images_of_me_:(.jpg)
Frits van Campen：我希望得到建设性的批评，这我已经知道了。 :)

标签： javascript regex

【解决方案1】：

猜这个问题已经回答了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>"); 
}

【讨论】：

这会产生各种不可接受的结果。例如：
Fiddle
好的。提供链接，因为它得分那么高。没有测试，只是希望你能用它......

【解决方案2】：

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

注意：“var re”中的“@”符号出现错误 - 我只是将其替换为 @@

【讨论】：

你现在有 > 10 个代表...