Generate link in plain text element using JavaScript

Sometimes, when working with externally generated content you might want to make links clickable when rendering it in the client.

This is a snippet to do just that.

It also sets the target to be a new tab target="_blank" and the rel to rel="noopener", so the new tab cant access your document object. Modern browsers should no longer need this, but you can’t be too safe.

element = document.getElementById("elementId");
element.innerHTML = element.innerHTML.replace(
  /(https?:\/\/\S*)/g,
  "<a href='$1' target='_blank' rel='noopener'>$1</a>"
);