JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<div>Some other text to select</div>
<a onclick="reportSelection()">Anchor without href using click</a>
<br>
<a onmousedown="reportSelection()">Anchor without href using mousedown</a>
<br>
<a onclick="reportSelection()" class="unselectable" unselctable="on">Unselectable anchor without href using click</a>
<br>
<a href="#" onclick="reportSelection()">Anchor with href using click</a>
<br>
<textarea id="selection" rows="5" cols="50"></textarea>

CSS

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

JavaScript

function reportSelection() {
    var sel = rangy.getSelection();
    var range = sel.getRangeAt(0);
    document.getElementById("selection").value = range.inspect();
    return false;
}