用 jquery 重写 href 值的问题答案

【问题标题】：Problems with rewriting href values with jquery用 jquery 重写 href 值的问题
【发布时间】：2011-07-04 05:41:34
【问题描述】：

我正在尝试以纯文本格式处理网址。

现在我能够定位和重写 www.null.com/foo/bar 到一个 href 和值与它自己的字符串相同的 href 和 value。

（感谢史蒂夫雷诺兹 http://bit.ly/Xk5Hc)

$("#topcontent p").each(function(){
    var newHTML;
    var stringInput = $(this).html();
    newHTML = replaceURLWithHTMLLinks(stringInput);     
    $(this).html(newHTML).find('a').addClass('highlite');
});

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

那么现在。有没有办法修改锚标签，使其值缩短为 .com 而不是 .com/foo/bar？

<a href="http://www.null.com/foo/bar">www.null.com</a>

【问题讨论】：

标签： javascript jquery regex url-rewriting

【解决方案1】：

var exp = /(www[-A-Z0-9+&@#%?=~_|!:,.;]*[-A-Z0-9+&@#%=~_|])([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])?/ig;

这将匹配并因此仅替换第一个“/”之前的部分，尽管它也会捕获其余部分，从而为您留下：

<a href="http://www.null.com">www.null.com</a>

编辑：修复了 URL 之后没有任何内容的问题。在 jsFiddle.net 中验证

【讨论】：

但如果链接不以 .com/something 结尾？
效果很好！任何方式这也可以应用于电子邮件地址？
/([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})/ig 应该用作电子邮件的正则表达式。替换为"<a href=mailto:$1>$1</a>"。借自zparacha.com/…，它解释了正则表达式背后的逻辑（删除了$和^）。

【解决方案2】：

这行得通吗？

正则表达式：a href=["']*http:\/\/([a-zA-Z0-9+&@#%=~_|.]+)

http://www.rubular.com/r/6UNlh52T86

【讨论】：

至于那个例子，我不认为它可以（或者我不知道，即使它可以，我猜）。我没有任何hrefs开始。只是试图从纯文本字符串中过滤掉看起来像链接的内容，并将这些文本包含在锚中。
我完全错过了您最初问题的“纯文本”部分。我的错，对不起。现在尝试一些其他的东西。

【解决方案3】：

如果你只是做一个函数来只返回清理后的 html 会更容易，所以：

function replaceURLWithHTMLLinks(text) {
    var exp = /(www[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"$1");
}

然后只需添加单独的 href 和 html：

href = replaceURLWithHTMLLinks(stringInput);
var link = $(document.createElement('a')).attr('href', 'http://'+href)
              .addClass('highlite')
              .html(href.replace(/\/[^.]+$/gi, ''));
$(this).html(link);

这将只是创建一个新的链接对象，添加正确的href，你用你的函数返回，然后用''替换所有结束的非点字符（在你的情况下，这将始终是/foo/bar）

此外，这比您之前的示例要好得多，因为它的 javascript 密集度较低（您不必再次找到“a”然后修改其属性，您只需从一开始就使用这些属性创建一个）

【讨论】：

那么...我将如何将其填充到我的代码中？尝试了一些变体，但最终还是将整个段落变成了一个链接