text selection

http://stackoverflow.com/questions/35529599/make-text-more-selectable

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="expandable">
Hi there, I'm trying to answer a question from Henrik Petterson @ http://stackoverflow.com/questions/35529599/make-text-more-selectable
</div>

CSS

.expandable{}
.expanded{
  border: 1px solid red;
  background-color: white;
}

JavaScript

$('.expandable').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    //this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
    //alert("done");
});

$('.expandable').click(function(e){
	var clicked = findClickedWord(e.target.childNodes[0], e.clientX, e.clientY);
  if(clicked){
    var $expanded = $('<span>')
    								.appendTo('body')
                    .addClass('expanded')
                    .css({
                      position: "absolute",
                      left: clicked[3].left,
                      top: clicked[3].top,
                      //width: "100px",
                      //height: "100px"
                    })
                    .append($("<h1>").text(clicked[0]));

		var data = {originalElem: e.target.childNodes[0], index: clicked[1], starts: clicked[2]};
    
    $expanded.data("parentData", data);
    $expanded.on('mouseup', selectionChanged);
    $expanded.on('touchend touchcancel', selectionChanged);

    //alert(JSON.stringify(clicked));
  }
});

function selectionChanged(e){
try {
	var $expanded = $(e.target);
  var data = $expanded.parents(".expanded").data("parentData");
  var selection = window.getSelection();
  if(selection.rangeCount){
  	var range1 = selection.getRangeAt(0);
    //alert(range1.startOffset + ":" + range1.endOffset);
    
    var range2 = document.createRange();
    var originalOffset = data.index>0? data.starts[data.index-1] : data.starts[0];
    range2.setStart(data.originalElem, originalOffset + range1.startOffset);
    range2.setEnd(data.originalElem, originalOffset + range1.endOffset);
    selection.removeAllRanges();
	  selection.addRange(range2);
  }
 } catch(err){
 alert(err);
 }
  $expanded.parents(".expanded").remove();
}

function findClickedWord(parentElt, x, y) {
    if (parentElt.nodeName !== '#text') {
        console.log('didn\'t click on text node');
        return null;
    }
    var range = document.createRange();
    var words =...