JSFiddle - React, Tailwind, and code Playground

by axl163

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div id="selectable" class="selectable">
  Rob Butterscotch was thinking about Rick Raymond again. Rick was a noble muppet with dirty feet and tall spots. Rob walked over to the window and reflected on his dull surroundings. He had always loved rural Liverpool with its adventurous, annoyed arches.
  It was a place that encouraged his tendency to feel stable. Then he saw something in the distance, or rather someone. It was the a noble figure of Rick Raymond. Rob gulped. He glanced at his own reflection. He was a brave, brave, squash drinker with sticky feet and pointy spots. His friends saw him as an adventurous, annoyed academic.
</div>
<button id="clear_btn">
  clear selections
</button>
<div id="result">
</div>

CSS

#selectable,
#result {
  font-size: 1.5em;
}

#result {
  margin: 20px 0;
}

.highlighted {
  background-color: yellow;
  display: inline;
}

JavaScript

var textSelector = (function() {
  var instance;

  function init() {
    var startSelection = null;
    var endSelection = null;

    function initialize() {
      $('.selectable').on('click', function() {
        setRange();
      });
      $('#clear_btn').on('click', function() {
        clearSelections();
      })
    }

    function clearSelections() {
      startSelection = null;
      endSelection = null;
      var sel = window.getSelection();
      sel.removeAllRanges();
      $('#result').text('');
    }

    function setRange() {
      var selectedRange = getStartOfSelection();
      if (startSelection == null) {
        startSelection = selectedRange;
        startSelection.expand('word');
        selectRange(startSelection);
      } else {
        endSelection = selectedRange;
      }
      getSelectedText();
    }

    function getStartOfSelection() {
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          return sel.getRangeAt(0);
        }
      } else if (document.selection && document.selection.createRange) {
        return document.selection;
      }
    }

    function getSelectedText() {
      if (startSelection && endSelection) {
        orderEndPoints();

        var range = document.createRange();
        var root_node = document.getElementById('selectable');

        range.setStart(root_node.childNodes[0], startSelection.startOffset);
        range.setEnd(root_node.childNodes[0], endSelection.endOffset);
        range.expand('word');

        $('#result').text(range.toString());
        selectRange(range);
      }
    }

    function orderEndPoints() {
      if (startSelection.startOffset > endSelection.startOffset) {
        var temp = startSelection;
        startSelection = endSelection;
        endSelection = temp;
      }
    }

    function selectRange(range) {
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }

 ...