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
How to Invoke a Jsf Managed Bean on a HTML Dom Event Using Native JavaScript
Create a Date With a Set Timezone Without Using a String Representation
How to Add Number of Days to Today'S Date
React: "This" Is Undefined Inside a Component Function
How to Check If a Variable Is an Array in JavaScript
Is the JavaScript Date Object Always One Day Off
Getting JavaScript Object Key List
How to Make Console.Log Show the Current State of an Object
Why This JavaScript Regex Doesn't Work
Check If an Array Contains Any Element of Another Array in JavaScript
Setting Rounded Corners for Svg:Image
Jquery Animate() and Backgroundcolor
Repeat Animation Every 3 Seconds
How to Get a Leaflet Map Canvas to Have a 100% Height
Vue.Js - Add Class to Clicked Button
Detect CSS Transitions Using JavaScript (And Without Modernizr)