JSFiddle - React, Tailwind, and code Playground

HTML

<div class="color-coding">
    <span class="orange color-coding">Hello 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();
    var sword = $.trim(range.toString());
    if(sword.length)
    {

      var newWord = "$1<span class='highlight'>$2</span>$3";

      $(this).each(function(){
          $(this).html(function( _, html ) {
        return html.replace(new RegExp("([^\\w]|^)("+sword+")([^\\w]|$)","g"),newWord);
      });
      });
    }
    range.collapse();
    e.stopPropagation();
  });

});