jQuery Text to Link Script?
Solution 1
JQuery isn't going to help you a whole lot here as you're not really concerned with DOM traversal/manipulation (other than creating the anchor tag). If all your URLs were in <p class="url"> tags then perhaps.
A vanilla JavaScript solution is probably what you want, and as fate would have it, this guy should have you covered.
Solution 2
NOTE: An updated and corrected version of this script is now available at https://github.com/maranomynet/linkify (GPL/MIT licence)
Hmm... to me this seems like the perfect task for jQuery.
...something like this came off the top of my mind:
// Define: Linkify plugin
(function($){
var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g,
url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g,
linkifyThis = function () {
var childNodes = this.childNodes,
i = childNodes.length;
while(i--)
{
var n = childNodes[i];
if (n.nodeType == 3) {
var html = $.trim(n.nodeValue);
if (html)
{
html = html.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(url1, '$1<a href="http://$2">$2</a>$3')
.replace(url2, '$1<a href="$2">$2</a>$5');
$(n).after(html).remove();
}
}
else if (n.nodeType == 1 && !/^(a|button|textarea)$/i.test(n.tagName)) {
linkifyThis.call(n);
}
}
};
$.fn.linkify = function () {
return this.each(linkifyThis);
};
})(jQuery);
// Usage example:
jQuery('div.textbody').linkify();
It attempts to turn all occurrences of the following into links:
www.example.com/path
http://www.example.com/path
mailto:[email protected]
ftp://www.server.com/path
- ...all of the above wrapped in angle brackets (i.e.
<
...>
)
Enjoy :-)
Solution 3
I have this function i call
textToLinks: function(text) {
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
}
Solution 4
I suggest you do this on your static pages before rendering to the browser, or you'll be pushing the burden of conversion computation onto your poor visitors. :) Here's how you might do it in Ruby (reading from stdin, writing to stdout):
while line = gets
puts line.gsub( /(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>" )
end
Obviously, you'll want to think about how to make this as robust as you desire. The above requires all URLs to start with http, and will check not to convert URLs that are in quotes (i.e. which may already be inside an <a href="...">). It will not catch ftp://, mailto:. It will happily convert material in places like <script> bodies, which you may not want to happen.
The most satisfactory solution is really to do the conversion by hand with your editor so you can eyeball and approve all substitutions. A good editor will let you do regexp substitution with group references (aka back references), so it shouldn't be a big deal.
Solution 5
Take a look at this JQuery plugin: https://code.google.com/p/jquery-linkifier/
Elijah Manor
I am a Christian and a family man. I'm the President of Manorism, Inc. and a PluralSight Author. I specialize in providing front-end web development training (JavaScript/jQuery/HTML5). I'm a Microsoft Regional Director, Microsoft ASP.NET MVP, ASPInsider, and IE userAgent. I enjoy blogging at http://elijahmanor.com and tweeting (@elijahmanor) about the things I learn.
Updated on August 09, 2020Comments
-
Elijah Manor over 3 years
Does anyone know of a script that can select all text references to URLs and automatically replace them with anchor tags pointing to those locations?
For example: http://www.google.com would automatically turn into <a href="http://www.google.com">http://www.google.com</a>
Note: I am wanting this because I don't want to go through all my content and wrap them with anchor tags.
-
Már Örlygsson over 15 yearsI disagree, solving this problem involves lots of DOM traversing (maybe not a lot of CSS selectors) and jQuery is a fine tool to solve this with. (See my example draft for a jQuery plugin below.)
-
Már Örlygsson about 14 yearsBTW, an updated and corrected version of this script is now available (GPL/MIT) at github.com/maranomynet/linkify
-
panchicore about 13 yearscool!. some ideas, set attr target value in options, and attach jquery from google cdn instead local copy. very very usefull piece of js.
-
John B almost 13 yearsI had issues with the project on GitHub in IE 7 and IE 8. So I submitted a pull request with a new regex. Thanks.
-
Nathan over 12 yearsWow! Thank you so much for this! I made a little jsFiddle of this if anyone wants to see a preview of it: jsfiddle.net/NathanJohnson/gRLaV
-
syntagma about 11 yearsUnfortunately it doesn't work on Chrome (v27).
-
Dan Dascalescu about 10 yearsThat plugin is very naive. It mentions no prior art, even though there are tons of URL parsing and validation libraries out there.
-
Dan Dascalescu about 10 years@MárÖrlygsson: are you still maintaining this library? Would love to include it in my roundup - see the GitHub ticket.
-
Már Örlygsson almost 10 yearsnot really. not at the moment at least
-
SexyMF almost 9 yearsNot all the usecases are working... jsfiddle.net/npnrm8dq
-
Sedat Kumcu about 7 yearsThanks for this useful source. Works fine for my project.