How To Wrap or Surround Highlighted Text With An Element

Add this library of jquery

<span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-3.6.3.js"</span><span class="pln"> </span><span class="atn">integrity</span><span class="pun">=</span><span class="atv">"sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="</span><span class="pln"> </span><span class="atn">crossorigin</span><span class="pun">=</span><span class="atv">"anonymous"</span><span class="tag">&gt;&lt;/script&gt;</span>

<span class="pln">
</span><span class="tag">&lt;script&gt;</span><span class="pln">
   </span><span class="kwd">function</span><span class="pln"> wrapText</span><span class="pun">(</span><span class="pln">elementID</span><span class="pun">,</span><span class="pln"> openTag</span><span class="pun">,</span><span class="pln"> closeTag</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    alert
    </span><span class="kwd">var</span><span class="pln"> textArea </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> elementID</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> len </span><span class="pun">=</span><span class="pln"> textArea</span><span class="pun">.</span><span class="pln">val</span><span class="pun">().</span><span class="pln">length</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> start </span><span class="pun">=</span><span class="pln"> textArea</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">selectionStart</span><span class="pun">;</span><span class="pln"> 
    </span><span class="kwd">var</span><span class="pln"> end </span><span class="pun">=</span><span class="pln"> textArea</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">selectionEnd</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> selectedText </span><span class="pun">=</span><span class="pln"> textArea</span><span class="pun">.</span><span class="pln">val</span><span class="pun">().</span><span class="pln">substring</span><span class="pun">(</span><span class="pln">start</span><span class="pun">,</span><span class="pln"> end</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> replacement </span><span class="pun">=</span><span class="pln"> openTag </span><span class="pun">+</span><span class="pln"> selectedText </span><span class="pun">+</span><span class="pln"> closeTag</span><span class="pun">;</span><span class="pln">
    textArea</span><span class="pun">.</span><span class="pln">val</span><span class="pun">(</span><span class="pln">textArea</span><span class="pun">.</span><span class="pln">val</span><span class="pun">().</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> start</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> replacement </span><span class="pun">+</span><span class="pln"> textArea</span><span class="pun">.</span><span class="pln">val</span><span class="pun">().</span><span class="pln">substring</span><span class="pun">(</span><span class="pln">end</span><span class="pun">,</span><span class="pln"> len</span><span class="pun">));</span><span class="pln">
</span><span class="pun">}</span><span class="pln">  
</span><span class="tag">&lt;/script&gt;</span>

<span class="pln">
&lt;input type="button" onclick="wrapText('myTextArea', '</span><span class="tag">&lt;b&gt;</span><span class="pln">', '</span><span class="tag">&lt;/b&gt;</span><span class="pln">')" value="Surround"&gt;
</span><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="atv">"myTextArea"</span><span class="tag">&gt;</span><span class="pln">One two three four  </span><span class="tag">&lt;textarea&gt;</span>