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. Once, he had even helped a gloopy blind person recover from a flying accident. But not even a brave person who had once helped a gloopy blind person recover from
  a flying accident, was prepared for what Rick had in store today. The sun shone like jogging rabbits, making Rob sleepy. Rob grabbed a ripped guillotine that had been strewn nearby; he massaged it with his fingers. As Rob stepped outside and Rick came
  closer, he could see the plastic smile on his face. "I am here because I want peace," Rick bellowed, in a charming tone. He slammed his fist against Rob's chest, with the force of 7821 kittens. "I frigging love you, Rob Butterscotch." Rob looked back,
  even more sleepy and still fingering the ripped guillotine. "Rick, I don't have the money," he replied. They looked at each other with fuzzy feelings, like two fast, fluttering foxes gyrating at a very scheming disco, which had trance music playing
  in the background and two generous uncles sleeping to the beat. Rob studied Rick's dirty feet and tall spots. Eventually, he took a deep breath. "I'm sorry, but I can't give you peace," he explained, in pitying tones. Rick looked relaxed, his body raw
  like a squealing, successful sausage. Rob could actually hear Rick's body...

CSS

#selectable, #result {
  font-size: 2em;
}
#result {
  margin: 20px 0;
}

JavaScript

var textSelector = (function() {
  // Instance stores a reference to the Singleton
  var instance;

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

    function initialize() {
      $('.selectable').on('touchstart', function() {
        setRange();
      });
    }

    function setRange() {
      var selectedRange = getStartOfSelection();
      if (startSelection == null) {
        startSelection = selectedRange;
      } 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());
        document.execCommand("BackColor", false, '#ff0000');
      }
    }

    function orderEndPoints() {
      if (startSelection.startOffset > endSelection.startOffset) {
        var temp = startSelection;
        startSelection = endSelection;
        endSelection = temp;
      }
    }
    return {
      initialize: function() {
        initialize();
      }
    };
  };
  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

var textHighlighter = textSelector.getInstance();
textHighlighter.initialize();