开发者

How to find link in a text using jquery?

Lets say I开发者_StackOverflow中文版 have a text such as this "This is a long text. It contains 150 characters. You can find more about this text on this link http://www.somewebsite.com/RDFCCSDVDS".

So in above text I want to find that link and convert it into a link so that when user clicks on it, the user will be taken directly to this website.

How can I achieve this goal?


Use regular expressions:

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

demo


I suspect that I could much improve upon this, though at the minute this is the best I can offer (albeit I think that some kind of replace might work more efficiently):

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 Fiddle demo.

A slightly improved version of the above (but good lord, it's ugly...):

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 Fiddle demo.

I'm not quite sure what to do about quoted links, though (text such as "http://google.com", for example); and, honestly, I think that regex is probably the far, far better approach to this problem.


@Eric solution is brilliant, but I discovered that could be wrong if the url has spaces after it. Try his jsfiddle example with a text like this:

<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>​​​​​​​​​​​​​​​​​​​​​​​

So I changed the latest part of the regex to intercept pretty much every URL-friendly character excluding the space, which is a url "terminator" to me (in the real world it's not, of course, but I couldn't find a way to separate normal spaces and spaces belonging to a URL in a plain text).

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

I think it can be improved, suggestions are welcome as always :)

EDITED:

Anyway, I think this is the best solution around: How to replace plain URLs with links?


using regular expression

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


in jquery, you can use the tag in your selector to get all the links of the page ie.. $("a")

So if you want to do something to every link on the page, you could use

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜