CODEWITHSUNDEEP
javascripthtmljqueryregex
Abdul Rehman
Abdul Rehman

Reputation: 68

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.

Upvotes: 1

Views: 2951

Answers (4)

Mogli
Mogli

Reputation: 760

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

Upvotes: 0

tharunoptimus
tharunoptimus

Reputation: 46

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.

Upvotes: 2

logi-kal
logi-kal

Reputation: 7880

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>

Upvotes: 1

Carlos Pinto
Carlos Pinto

Reputation: 136

I am not sure if i understand you correctly, but do you want to have it changed live or after the form was sent? If the latter, i would try something like this:

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]);
// Here my possible solution (not tried out)
$('#status').val('<a href="http://'+urlCheck.exec(status)[0]+"' target='_blank'>the link</a>");
}

But this would also mean that you could/must check with a RegEX if the user entered http or not.

Upvotes: 2

Related Questions