Given a plane URL, the task is to replace the plain URLs with the links. This problem can be solved with the help of Regular Expressions.
Approach: Using RegExp and replace() Method
- RegExp – This looks for the URL in the provided text.
- This RegExp parses the URL and puts the address to the $1 variable.
- After getting the URL in the text, it replaces it with <a> element and sets its href and other attributes.
Example: 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> let up = document.getElementById('GFG_UP'); let down = document.getElementById('GFG_DOWN'); let 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 const 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:
Example 2: In this example, we will put the URL to variable $1 and the Domain name to $3 after visiting the URL
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> let up = document.getElementById('GFG_UP'); let down = document.getElementById('GFG_DOWN'); let 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 const 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:
