how do I detect user input a url-like string in a contenteditable component and wrap it with a special tag just like discord does?

Target String seems like:

This is a test https://www.google.com/

and detect replace should be like:

This is a test <span class="highlight">https://www.google.com/</span>

And this replacement should not block user input