JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<div id="data">Hi all. Hello world. Good morning. Good morning.</div>
<input id="btn"
type="submit" value="Highlight" />
<input id="ss"
type="submit" value="Highlighst" />

CSS

#data {
  font-size : 20px;
  color : black;
}
.highlightedText {
  color : red;
}
.replaceBgColor {
  background-color: white;
}

JavaScript

$("#btn").click(function () {

  var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange(); // second one for IE
  if (selectedText.getRangeAt) {
    var range = selectedText.getRangeAt(0);
    var newNode = document.createElement("span");
    newNode.setAttribute('class', 'highlightedText');
    console.log(newNode);
    try {
      range.surroundContents(newNode);
    } catch (e) {
      $("#data").html($("#data").text().replace(selectedText, ('<span class="highlightedText">' + selectedText + '</span>')));
    }
  } else {
    selectedText.pasteHTML('<span class="highlightedText">' + selectedText.htmlText + '</span>');

  }
  //$('.highlightedText').replaceWith(swapText);
});