title: Wrap the highlight text with span element in JQuery or JavaScript
body: <p>This my code but there is an error if you override the highlighted text.<br>
  The error is: </p>
  
  <blockquote>
    <p>Uncaught InvalidStateError: Failed to execute 'surroundContents' on
    'Range': The Range has partially selected a non-Text node.</p>
  </blockquote>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function surroundSelection() {
    var span = document.createElement("span");
    span.setAttribute('class', 'hlt')
  
    if (window.getSelection) {
      var sel = window.getSelection();
      if (sel.rangeCount) {
        var range = sel.getRangeAt(0).cloneRange();
        range.surroundContents(span);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  }     
  </code></pre>