如何使用jQuery在文本中找到链接？

Question

可以说我有一个这样的文本“这是一个长文本。它包含150个字符。您可以在此链接http://www.somewebsite.com/RDFCCSDVDS上找到有关此文本的更多信息”。

因此，在上面的文本中，我想找到该链接并将其转换为链接，以便当用户单击它时，该用户将被直接带到该网站。

我怎样才能实现这个目标？

Answer 1

使用正则表达式：

$('p').html(function(i, text) {
     return text.replace(
         /\bhttp:\/\/([\w\.-]+\.)+[a-z]{2,}\/.+\b/gi,
         '<a href="$&">$&</a>'
     );
});

演示

Answer 2

我怀疑我可以对此做很多改进，尽管在目前这是我能提供的最好的（尽管我认为某种替换可能更有效）：

var $words = $('p').text().split(' ');
for (i in $words) {
    if ($words[i].indexOf('http://') == 0) {
        $words[i] = '<a href="' + $words[i] + '">' + $words[i] + '</a>';
    }
}

$('p').html($words.join(' '));

JS小提琴演示 。

上面的版本略有改进（但是好主啊，这很丑...）：

var punctuation = ['!',"'",'"',',','.'];
$('p').each(
    function(){
        $words = $(this).text().split(' ');
        for (i in $words){
            if ($.inArray($words[i].charAt(0),punctuation) > -1 && $words[i].indexOf('http://') == 1){
                alert($words[i]);
            }
            else if ($.inArray($words[i].charAt($words[i].length - 1),punctuation) > -1 && ($words[i].indexOf('http://') == 1 || $words[i].indexOf('http://') == 0)){
                $words[i] = '<a href="'+$words[i].substring(0,$words[i].length-1)+'">' + $words[i].substring(0,$words[i].length-1) + '</a>' + $words[i].charAt($words[i].length-1);
            }
            else if ($words[i].indexOf('http://') == 0){
                $words[i] = '<a href="' + $words[i] + '">' + $words[i] + '</a>';
            }
        }
        $(this).html($words.join(' '));
    });

JS小提琴演示 。

不过，我不太确定该如何处理带引号的链接（例如， "http://google.com"文字）； 而且，说实话，我认为，正则表达式可能是这个问题远远更好的办法。

Answer 3

@Eric解决方案非常出色，但是我发现如果url后面有空格，那可能是错误的。 尝试用下面的文本尝试他的jsfiddle示例：

<p>This is a long text. It contains 150 characters. You can find more about this text on this link http://api.som-ewebsite.com/RDFCCS-VDS/#!/?p1=foo&p2=bar right here</p>​​​​​​​​​​​​​​​​​​​​​​​

因此，我更改了正则表达式的最新部分，以截取除空格以外的几乎所有URL友好字符，这对我来说是一个“终止符”（当然，在现实世界中，这不是，但是我找不到方法以纯文本分隔普通空格和属于URL的空格）。

$('p').html(function(i, text) {
    return text.replace(
        /\bhttp:\/\/([\w\.-]+\.)+[a-z]{2,}([\/\w\.\-\_\?\=\!\#,\&]+)/gi,
        '<a href="$&">$&</a>'
    );
});​​

我认为可以改进，一如既往地欢迎提出建议：)

编辑：

无论如何，我认为这是最好的解决方案： 如何用链接替换纯URL？

Answer 4

使用正则表达式

var e = /http:\/\/([A-Za-z0-9\.-_]{2,}\.)+[A-Za-z]{2,}(\/.+)/,
    s = "This is a long text. It contains 150 characters. You can find more about this text on this link http://www.somewebsite.com/RDFCCSDVDS";

if (s.match(e)) {
    var url = RegExp['$&'];
    s = s.replace(url, '<a href="' + url + '">' + url + '</a>');
}

Answer 5

在jquery中，您可以使用选择器中的标记来获取页面的所有链接，即.. $("a")

因此，如果您想对页面上的每个链接进行操作，则可以使用

$("a").each(function() {
    //your code here. you can access the link by using $(this)
});