JSFiddle - React, Tailwind, and code Playground

HTML

<div class="color-coding">
    <span class="orange color-coding">Hello some world this is some text.</span>
        <br>
    <span class="orange color-coding">Here is some more!</span>
</div>

CSS

.orange {
    color: orange;
}

.highlight {
    background: yellow;
}

JavaScript

jQuery(document).ready(function($) {

    $('.color-coding').dblclick(function(e) {
        var range = window.getSelection() || document.getSelection() || document.selection.createRange(),
        	sword = $.trim(range.toString());
        if(sword.length) {
            this.setAttribute('contenteditable','true');
            document.execCommand("insertHTML", false, "<span class='highlight'>"+sword+"</span>");
            this.removeAttribute('contenteditable');
        }
        e.stopPropagation();
    });

});