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

Question

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.

textarea will only show plain text so it will not display the link as link — Aalexander
– Aalexander, Commented Feb 2, 2021 at 9:59

Carlos Pinto · Accepted Answer · 2021-02-02 09:55:54Z

2

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.

answered Feb 2, 2021 at 9:55

Carlos Pinto

1369 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tharunoptimus · Accepted Answer · 2021-02-02 10:14:08Z

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.

answered Feb 2, 2021 at 10:14

tharunoptimus

466 bronze badges

Comments

logi-kal · Accepted Answer · 2021-02-02 10:07:51Z

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>

answered Feb 2, 2021 at 10:07

logi-kal

7,8996 gold badges35 silver badges48 bronze badges

Comments

Mogli · Accepted Answer · 2022-01-26 13:59:52Z

0

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

answered Jan 26, 2022 at 13:59

Mogli

7606 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related