✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Convert URL Text Into Clickable HTML Links Using JavaScript

Last Updated : Jul 1, 2023

IN - JavaScript HTML | Written & Updated By - Pragati

In This tutorial we will Convert the URL text into a HTML clickable links using JavaScript.

For eg; When you post comments in tutorials and your comment contains some link of a website many times the link is post in a simple text format not in a clickable HTML link format and due to this other users will ignore your link.

So in this tutorial we will solve this problem.You may also like create short url using PHP.

Convert URL Text Into Clickable HTML Links Using JavaScript

CHECK OUT THIS TUTORIAL LIVE DEMO →

Make a HTML file and define markup and script To Convert URL into HTML Links

We have to make a HTML file and named it url.html 

<html>
<head>
  <script type="text/javascript">
    function convert()
    {
	  var text=document.getElementById("url").value;
	  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	  var text1=text.replace(exp, "<a href='$1'>$1</a>");
	  var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
	  document.getElementById("converted_url").innerHTML=text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
    }
  </script>
</head>

<body>
  
  <h1>Convert URL Text Into Clickable HTML Link Using JavaScript</h1>
  <textarea id="url" Placeholder="Enter Some Text With Links">
  </textarea>
  <input type="button" value="Convert" onclick="convert();">
  <p id="converted_url"></p>

</body>
</html>

In This step we create a textarea where user will write some text with links and after that when the user clicks on convert button we call convert(); function.

In this function we write two regular expressions to detect link with in a text.You may also like extract url data like facebook using PHP and ajax.

First regular expression detects whether the link starts from http,https,ftp,file and if yes then it convert the text to Clickable HTML link

Second regular expression is used to detect whether the link starts from www and if yes then it convert the text to Clickable HTML link and insert the text into paragraph.

You may also like create short urls using PHP and google api.

Thats all, this is how to Convert URL Text Into Clickable HTML Links Using JavaScript. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on text to url javascript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪