Find all URLs in a string except the URL inside a and img tag and make a link using JavaScript
Today we will show you how to find all URLs in a string except the URL inside a and img tag and make a link using JavaScript.
Previously, we wrote a similar article but there we did not have the ability to ignore the URLs in the anchor tag and image tag.
Checkout more articles on JavaScript
Here we will take the following string which we will test with the previous code and then try with the updated new code.
String: Visit www.cluemediator.com and <a href="https://www.cluemediator.com/subscribe" target="_blank" rel="noopener noreferrer">subscribe us</a> for regular updates.
Replace a hyperlink instead of the text URLs
This is the code of the previous article where we are changing the hyperlink instead of the text URL without checking the tag.
Reference: Find URLs in string and make a link using JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function replaceURLs(message) { if(!message) return; var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g; return message.replace(urlRegex, function (url) { var hyperlink = url; if (!hyperlink.match('^https?:\/\/')) { hyperlink = 'http://' + hyperlink; } return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>' }); } replaceURLs('Visit www.cluemediator.com and <a href="https://www.cluemediator.com/subscribe" target="_blank" rel="noopener noreferrer">subscribe us</a> for regular updates.'); // Output: Visit <a href="//www.cluemediator.com\"" target="\"_blank\"" rel="\"noopener noopener">www.cluemediator.com</a> and <a href="\"<a" target="\"_blank\"" rel="\"noopener noopener">https://www.cluemediator.com/subscribe\"</a> target=\"_blank\" rel=\"noopener noreferrer\">subscribe us for regular updates. |
You can see that the given code is also changing the link to the anchor tag. Similarly, it will also change the image tag URL. Let’s solve this problem.
Replace a hyperlink instead of the text URLs except a tag and img tag
Now we will slightly update the Regular Expression to ignore a tag and img tag from the string. Use the following code to check the same string.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function replaceURLs(message) { if (!message) return; var urlRegex = /(<img\s[^>]*>|<a(?:\s[^>]*)?>[\s\S]*?<\/a>)|(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/gi; return message.replace(urlRegex, function (url, tag) { if (tag) return url; var hyperlink = url; if (!hyperlink.match('^https?:\/\/')) { hyperlink = 'http://' + hyperlink; } return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>' }); } replaceURLs('Visit www.cluemediator.com and <a href="https://www.cluemediator.com/subscribe" target="_blank" rel="noopener noreferrer">subscribe us</a> for regular updates.'); // Output: Visit <a href="//www.cluemediator.com\"" target="\"_blank\"" rel="\"noopener noopener">www.cluemediator.com</a> and <a href="//www.cluemediator.com/subscribe\"" target="\"_blank\"" rel="\"noopener noopener">subscribe us</a> for regular updates. </a(?:\s[^></img\s[^> |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
