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\.\-\_\?\=\!\#,\&]+)/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)
});
精彩评论