Hi! Today let's see how to convert url text to clickable link using javascript. At times, you may want to turn the plain url text into clickable hyperlink automatically. CMS like Wordpress has this feature integrated by default. Also blog commenting systems such as Disqus use this to convert naked url text posted by users into hyperlinks. This feature is quite useful and allows others to link relevant pages across web easily. If you want to implement this feature on your own, you can do so using regular expressions and java script. Here we go!
Converting Plain URL into Clickable Link
First let's create a form interface with a textarea input and a button. User has to enter a bunch of text and click on 'Convert' button. Then our JS function will detect URLs from the text and replace the plain URLs with clickable links.
index.html
<!doctype html>
<html>
<head>
<title>Convert URL Text into Hyperlink</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="col-xs-8 col-xs-offset-2">
<h2 class="bg-warning text-center">Convert URL Text to Clickable Link | Demo</h2>
<form>
<div class="form-group">
<textarea id="urltext" placeholder="Please enter url text here..." class="form-control input-lg" rows="5"></textarea>
</div>
<div class="form-group">
<input type="button" value="Convert" class="btn btn-warning btn-block btn-lg" onclick="toHyperlink();" />
</div>
</form>
<div id="result" class="lead"></div>
</div>
</body>
</html>
Now we get a form like this,
JavaScript Function
Next we need to write the java script function that takes up the user input, parse, find and replace the text URLs with hyperlinks with the help of regular expression patterns and return the converted text.
<script type="text/javascript">
function toHyperlink()
{
var str = document.getElementById("urltext").value;
var pattern1 = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var str1 = str.replace(pattern1, "<a href='$1'>$1</a>");
var pattern2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
var str2 = str1.replace(pattern2, '$1<a target="_blank" href="http://$2">$2</a>');
document.getElementById("result").innerHTML = str2;
}
</script>
Add the above script to the index.html file. The function toHyperlink() will do a two-step pattern match. First it will find the links starting with http / https / ftp / file and replace those with hyperlinked texts. Next it looks for urls that start with www and replace those with clickable links.
Now run the file and enter some plain url text in the box provided and click 'Convert'.
Our JS function will do its magic and you will see converted text with clickable links below the form.
- How to Dynamically Add and Remove Textbox using jQuery and PHP
- Best jQuery Drag and Drop File Upload Plugins with Progress Bar
That was all about converting non-clickable url into hyperlink with java script. Regular expression is a powerful weapon and you must make sure to use it properly. I hope you like this tutorial. Feel free to customize the code according to your preferences. And please don't forget to share it on social networks.
