'How to check if string contains url anywhere in string using javascript and convert it to anchor tag

I have a textarea in which I am getting user's input data. But I need to know if there is any URL in textarea and convert it to anchor tag. For example:

Textarea Data: Hi I'm Abdul. My Website is https://website.com

After Anchor Tag: Hi I'm Abdul. My Website is <a href="https://website.com">https://website.com</a>

Currently my code is:

var status = $('#status').val();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
        if(urlCheck.test(status)) {
        alert("url inside");
        console.log(urlCheck.exec(status)[0]);
}

This is my current code but I don't know how to replace url with anchor tag in that string.

javascripthtmljqueryregex


Solution 1:[1]

You have to use the JS replace() function.

I set the following example with an input textarea and an output textarea for let you see the difference.

function addUrl() {
  var status = $('#status').val();
  var urlCheck = /(([a-zA-Z0-9]+:\/\/)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(\/.*)?)/;
  $('#output').val(status.replace(urlCheck, '<a href="$1">$1</a>'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="status">Input</label>
<textarea id="status" onChange="addUrl()"></textarea>
<br/>
<label for="output">Output</label>
<textarea id="output"></textarea>

Solution 2:[2]

var status = $('#status').text();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
    alert("It has an URL!");
    console.log(urlCheck.exec(status)[0]);
}
document.getElementById("status").innerHTML = status.replace(urlCheck.exec(status)[0],"<a href='"+urlCheck.exec(status)[0]+"'>"+urlCheck.exec(status)[0]+"</a>");
<div id="status">Hi I'm Abdul. My Website is https://website.com</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

We can use the html.replace() to replace the url inside the tags we wanted.

Solution 3:[3]

use linkifyHtml or linkifyString : Linkify String Interface. Use linkify-string to replace links in plain-text strings with anchor tags.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 horcrux
Solution 2 tharunoptimus
Solution 3 Mogli

Related Questions