JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sandbox">
      <h1>東京</h1>
      <p id="p1">
          「東京」の地名は、1868年9月（明治元年（慶応4年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。
「東京」の意味合いとしては、「京」が首都を意味することから「東の都」だとする見方や、西の京都に対して「東の京都」だとする見方もある。

江戸は東京と称することになったが、読み方については根拠となるような法令が出たわけでもなかった。「とうきやう」（呉音）が正規に使われたが、
明治20年代頃までは「とうけい」（漢音）も混在して用いられることも少なくなかった。日刊新聞の発達により人々が情報を共有する機会が広がり、
第1期国定国語教科書で「東京」の振り仮名が「トーキョー」と表記され（棒引き仮名遣い）、混在はなくなった。一方、昭和初期までは「東亰」という表記も混用されていた。
この「亰」という文字は「京」の俗字である。「亰」を使ったのは、中国の東京（Dongjing、ドンジン）との混同を防ぐためともいわれるが、後に同じ字となった。
江戸を東京と改称するという構想は、江戸時代後期の経世家である佐藤信淵が文政6年（1823年）に著した『混同秘策』に既に現われており、
大久保利通はこれに影響を受けて江戸を東京とする建言をしたという。
1889年（明治22年）5月1日には、東京15区を東京府から分立して東京市とした。東京市は1923年（大正12年）
の関東大震災によって人口が増加した周辺の町村を合併し、市域は最終的には現在の東京都区部とほぼ同地域となった。
      </p>
</div>

<p id="sandbox"><button id="remove-highlights-btn">ハイライトをリセット</button></p>

CSS

#sandbox {
width: 80%;
margin: 15px auto;
padding: 20px;
text-align: justify;
}
h1{font-size:24px;}     
div {
border: 1px solid #eee;
padding: 3px;
line-height:22px;
font-size:13px;
}

JavaScript

/**
 * @license jQuery Text Highlighter
 * Copyright (C) 2011 - 2013 by mirz
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

(function($, window, document, undefined) {
    var nodeTypes = {
        ELEMENT_NODE: 1,
        TEXT_NODE: 3
    };

    var plugin = {
        name: 'textHighlighter'
    };

    function TextHighlighter(element, options) {
        this.context = element;
        this.$context = $(element);
        this.options = $.extend({}, $[plugin.name].defaults, options);

        this.init();
    }

    TextHighlighter.prototype = {
        init: function() {
            this.$context.addClass(this.options.contextClass);
            this.bindEvents();
        },

        destroy: function() {
            this.unbindEvents();
            this.$context.removeClass(this.options.contextClass);
            this.$context.removeData(plugin.name);
        },

        bindEvents: function() {
            this.$context.bind('mouseup', {self:...