Detect Urls in Text with JavaScript

Detect URLs in text with JavaScript

First you need a good regex that matches urls. This is hard to do. See here, here and here:

...almost anything is a valid URL. There
are some punctuation rules for
splitting it up. Absent any
punctuation, you still have a valid
URL.

Check the RFC carefully and see if you
can construct an "invalid" URL. The
rules are very flexible.

For example ::::: is a valid URL.
The path is ":::::". A pretty
stupid filename, but a valid filename.

Also, ///// is a valid URL. The
netloc ("hostname") is "". The path
is "///". Again, stupid. Also
valid. This URL normalizes to "///"
which is the equivalent.

Something like "bad://///worse/////"
is perfectly valid. Dumb but valid.

Anyway, this answer is not meant to give you the best regex but rather a proof of how to do the string wrapping inside the text, with JavaScript.

OK so lets just use this one: /(https?:\/\/[^\s]+)/g

Again, this is a bad regex. It will have many false positives. However it's good enough for this example.

function urlify(text) {

var urlRegex = /(https?:\/\/[^\s]+)/g;

return text.replace(urlRegex, function(url) {

return '<a href="' + url + '">' + url + '</a>';

})

// or alternatively

// return text.replace(urlRegex, '<a href="$1">$1</a>')

}

var text = 'Find me at http://www.example.com and also at http://stackoverflow.com';

var html = urlify(text);

console.log(html)

How to find if a text contains url string

    function replaceURLWithHTMLLinks(text)
{
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}

how to detect and get url on string javascript

You input has double :: after http. Not sure if it intentional. If it is then use:

var matches = string.match(/\bhttps?::\/\/\S+/gi);

If only one : is needed then use:

var matches = string.match(/\bhttps?:\/\/\S+/gi);

RegEx Demo

find links in plain text and convert them to hyperlinks

I embed a snippet which should solve your problem: your code was correct, but it had some problems in the console log and in replacing the links with the right content.

function transformHyperlinks() {
const postmsg = document.getElementById("start").value;

const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
const detectURL = postmsg.match(urlRegex);

let resultPost = postmsg

detectURL.forEach(url => {
resultPost = resultPost.replace(url, '<a href= "' + url + '" role="link" > ' + url.trim() + '</a>')
})

document.getElementById("end").innerHTML = resultPost;
}
<h2>Old text</h2>
<textarea id="start">test https://facebook.com https://www.google.com test</textarea>

<button onclick=transformHyperlinks()>Transform Hyperlinks</button>

<h2>New text</h2>
<div id="end"></div>

React JS Detect link from text this is my [web](https://www.google.com/)

If you wanted to continue using dangerouslySetInnerHTML you could use this match/replace to create an anchor...

const text = 'this is my [web](https://www.google.com/)'

const regex = /(.+)\[(.+)\]\((.+)\)/;

const anchor = text.replace(regex, (match, a, b, c) => {
const text = `${a[0].toUpperCase()}${a.substring(1)}${b}`;
return `<a href="${c}">${text}</a>`;
});

console.log(anchor);


Related Topics



Leave a reply



Submit