JSFiddle - React, Tailwind, and code Playground

by mlsteeves

HTML

<textarea rows="10" cols="50">test</textarea>
<input id="textareaselection" type="text"/>
<hr/>
<div id="divEditable" contenteditable="true">test <b>Anothe <i>test</i> rTest</b></div>
<input id="divSelection" type="text"/>
<div id="here"></div>

CSS

#divEditable{
    width:75%;
    height:150px;
    border: solid 1px gray;
    margin-bottom: 5px;
}

JavaScript

$('textarea').live('blur keyup click', function(){
    $('#textareaselection').val(this.selectionStart + "-" + this.selectionEnd);    
});

$('#divEditable').live('keyup click', function(){
    if( window.getSelection){
        var selObj = window.getSelection();
        var selRange = selObj.getRangeAt(0);
        var start = selRange.startOffset;
        var end = selRange.endOffset;
        var baseOffsets = childLocations(selObj.baseNode, this);
        var extentOffsets = childLocations(selObj.extentNode, this);
        $('#divSelection').val(start + "-" + end);
    }
});

function childLocations( el, topParent ){
    var locations = new Array();
    var next = el;
    while( next != topParent ){
        var k=0, e=next;
        while( e = e.previousSibling ){ k++; }
        
        locations.push(k);
        
        next = next.parentNode;
    }
    
    return locations;
}