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:
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:
Article Tags :
Recommended Articles