Regex match url without <a> tag - JS

Question

I am looking for a regex expression in JavaScript for the same use case as this post here: regex matching links without <a> tag

My goal is to transform a string such as

Here is a link https://www.somewebsite.com/ here is a link already in an a tag <a href="https://www.somewebsite.com/">https://www.somewebsite.com/</a>

To

Here is a link <a href="https://www.somewebsite.com/">https://www.somewebsite.com/</a> here is a link already in an a tag <a href="https://www.somewebsite.com/">https://www.somewebsite.com/</a>

There are many regex examples for a url, but I am not sure how to add an "and" condition for the url match not being in an <a> tag. I have only found examples so far for php or python, but not JS.

Thank you!

This is an example why parsing HTML with reg exp is a bad idea. — epascarello
– epascarello, Commented Jul 23, 2018 at 17:37
"I am not sure how to add an and condition" - you could use a negitive look ahead to confirm that the matched pattern (the link) in not followed by a </a> tag. Another approach would be to use a negated character set to tell the regex engine to match everything until a < is encountered. — Wololo
– Wololo, Commented Jul 23, 2018 at 17:52

KevBot · Accepted Answer · 2018-07-23 18:28:03Z

3

Instead of using regex, you can test the URL that was supplied to see if it is treated as an external resource. Here, I split the string by whitespace, then tested each part to see if it is a defined URL.

const string = `Here is a link https://www.somewebsite.com/ here is a link already in an a tag <a href="https://www.somewebsite.com/">https://www.somewebsite.com/</a>`;

const newString = string
  .split(/\s+/)
  .map(string => (isDefinedUrl(string)) ? makeUrl(string) : string)
  .join(' ');

console.log(newString);


function isDefinedUrl(possibleUrl) {
  const a = document.createElement('a');
  a.href = possibleUrl;
  return (possibleUrl === a.href);
}

function makeUrl(url) {
  return `<a href="${url}">${url}</a>`;
}

answered Jul 23, 2018 at 18:28

KevBot

19k5 gold badges54 silver badges71 bronze badges

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

2 Comments

Daniel Beck Over a year ago

That is a really clever approach!

sritmak Over a year ago

very clever, but then you are stuck if a hyperlink is not surrounded with spaces, like this link (https://example.com)... What could be other valid separators?

Collectives™ on Stack Overflow

Regex match url without <a> tag - JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related