JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis ullamcorper posuere. In laoreet cursus felis, et hendrerit nisi sagittis at. Pellentesque aliquam cursus enim eget ultrices. Mauris venenatis tortor sit amet turpis dignissim quis cursus leo auctor. Aenean tincidunt rutrum accumsan. Integer et felis sed tortor elementum congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Aliquam erat volutpat. Nullam pharetra, orci at dignissim eleifend, augue erat posuere erat, vel condimentum tortor felis sed orci. Aliquam erat volutpat. Integer bibendum tortor eget sapien ultricies ac suscipit sapien volutpat. Donec viverra sem at lectus lacinia cursus. Etiam venenatis ipsum quis tortor malesuada vitae sollicitudin magna convallis.</p>

JavaScript

if (document.addEventListener) { // standard

  document.addEventListener('click', function onclick(e) {
    var r;
    if (document.caretRangeFromPoint) { // standard (WebKit)
      r = document.caretRangeFromPoint(e.pageX, e.pageY);
    } else if (e.rangeParent) { // Mozilla
      r = document.createRange();
      r.setStart(e.rangeParent, e.rangeOffset);
    }

    var t = r.startContainer; // should be a text node
    var s = r.startOffset; // number of chars from the start of text
    var e = s;

    while (s > 0) {
      s -= 1;
      r.setStart(t, s);
      if (/^\s/.test(r.toString())) {
        r.setStart(t, s += 1);
        break;
      }
    }
    var l = t.nodeValue.length;
    while (e < l) {
      e += 1;
      r.setEnd(t, e);
      if (/\s$/.test(r.toString())) {
        r.setEnd(t, e -= 1);
        break;
      }
    }

    window.getSelection().addRange(r);
    alert(r.toString());

  }, false);

} else if (document.attachEvent) { // IE

  document.attachEvent('onclick', function onclick(e) {
    if (!e) e = window.event;
    if (document.selection && document.selection.createRange) {
      var r = document.selection.createRange();
      r.moveToPoint(e.x, e.y);

      r.moveStart('word', -1);
      if (/^\s/.test(r.text)) r.moveStart('character', 1);
      r.moveEnd('word', 1);
      if (/\s$/.test(r.text)) r.moveEnd('character', -1);

      r.select();

      alert(r.text);
    }
  });

}