How to replace plain URL with link using JavaScript ?
Given an plane URL and the task is to replace the plain URLs into the links. This problem can be solve with the help of Regular Expressions.
Approach 1:
- RegExp – Which looks for the URL in the provided text.
- This RegExp parse the URL and put the address to the $1 variable.
- After getting the URL in text, it replace it with <a> element and set its href and other attributes.
Example 1: This example implements the above approach.
html
<!DOCTYPE HTML><html><head> <title> How to replace plain URL with link using JavaScript ? </title></head><body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var text = 'This is https://www.geeksforgeeks.org/'; up.innerHTML = "Click on the button to replace " + "plain URLs with links.<br>" + text; function rep(text) { // Put the URL to variable $1 after visiting the URL var Rexp =/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g; // Replace the RegExp content by HTML element return text.replace(Rexp, "<a href='$1' target='_blank'>Link to URL</a>"); } function GFG_Fun() { down.innerHTML = rep(text); } </script></body></html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Approach 2:
- RegExp – Which looks for the URL in the provided text and also finds the domain name of the URL.
- After getting the URL in text, it replace it with a <a> element and set its href and other attributes. It also replaces the link text by domain name.
Example 2: This example implements the above approach.
html
<!DOCTYPE HTML><html><head> <title> How to replace plain URL with link using JavaScript ? </title></head><body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var text = 'This is https://www.geeksforgeeks.org/'; up.innerHTML = "Click on the button to replace " + "plain URLs with links.<br>" + text; function rep(text) { // Put the URL to variable $1 and Domain name // to $3 after visiting the URL var Rexp =/(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig; // Replacing the RegExp content by HTML element return text.replace(Rexp, "<a href='$1' target='_blank'>$3</a>"); } function GFG_Fun() { down.innerHTML = rep(text); } </script></body></html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Please Login to comment...