JSFiddle - React, Tailwind, and code Playground

HTML

<DIV class="peCont" contenteditable="true">Text goes here along <s>with <b>some <i>HTML</i> tags</b></s>.</DIV>;

JavaScript

$(function() {
    $('html').on('click', function(e) {
        if(document.getSelection) {
            var selection = document.getSelection();
            // Is there a range available?
            if( ! selection.rangeCount)
                return;
            
            // Ask for URL                
            var url = prompt('URL pls','http://google.com');
            
            var range = selection.getRangeAt(0);
            
            // Find start of word
            while((range.startOffset > 0) && (range.collapsed || (/^[^\s\.]/.test(range.toString())))) {
                range.setStart(range.startContainer, range.startOffset-1);
            }
            // Cut off starting space or dot
            if(/^[\s\.]/.test(range.toString())) {
                range.setStart(range.startContainer, range.startOffset+1);
            }
            
            // Find end of word
            while((range.endOffset < range.endContainer.length) && (range.collapsed || (/[^\s\.]$/.test(range.toString())))) {
                range.setEnd(range.endContainer, range.endOffset+1)
            }
            // Cut off ending space or dot
            if(/[\s\.]$/.test(range.toString())) {
                range.setEnd(range.endContainer, range.endOffset-1);
            }
            
            var anchor = $('<a />').attr('href', url)[0];
            range.surroundContents(anchor);
            
            // Deselect string, put the cursor to the end
            selection.removeAllRanges();
            range.selectNodeContents(anchor);
            range.collapse(false);
            selection.addRange(range);
        }
    });
});