JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<span>Hello world.Good morning. Hello world. Good morning.</span>

<button>CLICK</button>

JavaScript

function swapSelection(swapText) {
  var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
  if (sel != "") {
    if (sel.getRangeAt) {
      var range = sel.getRangeAt(0);
      var newNode = document.createElement("span");
      newNode.setAttribute('class', 'swapclass');
      range.surroundContents(newNode);
    } else {
      sel.pasteHTML('<span class="swapclass">' + sel.htmlText + '</span>');

    }
    $('.swapclass').replaceWith(swapText);
  }
}

$('button').click(function () {
  swapSelection('night');
});