How to find link in a text using jquery?

Question

Lets say I 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?

possible duplicate of [How to replace plain URLs with links?](http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links) — Eric, Oct 15 '11 at 20:19

score 9 · Answer 1 · answered Oct 15 '11 at 20:24

9

Use regular expressions:

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

demo

answered Oct 15 '11 at 20:24

Eric

95,302
53
242
374

1

how would you cater for https in your regex? – Morgs Dec 30 '15 at 08:47

David Thomas · Accepted Answer · 2011-10-15T20:23:23.843

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.

In this case? Absolutely! I'm somewhat appalled at the mess up there (which works, but...I **know** there's a lot of situations that it doesn't have an `if` for). — David Thomas, Oct 15 '11 at 20:27

score 1 · Answer 3 · edited May 23 '17 at 11:59

@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?

score 0 · Answer 4 · answered Oct 15 '11 at 20:02

0

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

answered Oct 15 '11 at 20:02

Guard

6,816
4
38
58

That regular expression doesn't work if there is punctuation after the link, or if there is more than one link to replace. You used regex. You now have two problems. – Eric Oct 15 '11 at 20:27

score -2 · Answer 5 · answered Oct 15 '11 at 19:43

-2

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

answered Oct 15 '11 at 19:43

Stephen

741
8
18

what I want is to convert this link from plan text to html anchor link so that it will be clickable. At the moment user will have to select it and copy and paste in order to visit that website. – doforumda Oct 15 '11 at 19:47

How to find link in a text using jquery?

5 Answers5