Detect URLs in text with JavaScript

First you need a good regex that matches urls. This is hard to do. See here, here and here:

…almost anything is a valid URL. There
are some punctuation rules for
splitting it up. Absent any
punctuation, you still have a valid
URL.

Check the RFC carefully and see if you
can construct an “invalid” URL. The
rules are very flexible.

For example ::::: is a valid URL.
The path is ":::::". A pretty
stupid filename, but a valid filename.

Also, ///// is a valid URL. The
netloc (“hostname”) is "". The path
is "///". Again, stupid. Also
valid. This URL normalizes to "///"
which is the equivalent.

Something like "bad://///worse/////"
is perfectly valid. Dumb but valid.

Anyway, this answer is not meant to give you the best regex but rather a proof of how to do the string wrapping inside the text, with JavaScript.

OK so lets just use this one: /(https?:\/\/[^\s]+)/g

Again, this is a bad regex. It will have many false positives. However it’s good enough for this example.

function urlify(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  })
  // or alternatively
  // return text.replace(urlRegex, '<a href="https://stackoverflow.com/questions/1500260/">$1</a>')
}

var text="Find me at http://www.example.com and also at http://stackoverflow.com";
var html = urlify(text);

console.log(html)
// html now looks like:
// "Find me at <a href="http://www.example.com">http://www.example.com</a> and also at <a href="http://stackoverflow.com">http://stackoverflow.com</a>"

So in sum try:

$$('#pad dl dd').each(function(element) {
    element.innerHTML = urlify(element.innerHTML);
});

Leave a Comment