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

• console methods in JavaScript
• Get a random value from array in JavaScript
• Do’s and don’ts in JavaScript
• Remove Duplicate Values from an Array in JavaScript
• Detect Browsers in 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

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.

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..!! 🙂