Edit in JSFiddle

<div id='box'>
    <h1>The Range Plugin</h1>
    <p>Select a <b>range</b> of text in the </p>
    <p>and get <i style="color: orange;">useful info</i> about it!</p>
</div>

<pre id='info'></pre>

var curStart = $(),
    curEnd = $(),
    curParent = $(),
    htmlEl = function(el){
        return el.nodeType === 3 || el.nodeType === 4 ?
            el.parentNode : el;
    };

$('#box').mouseup(function(){
    var range = $.Range.current();
    var start = range.start(),
        end = range.end();
    curStart.removeClass('start');
    curEnd.removeClass('end');
    curParent.removeClass('parent')
    var starter = htmlEl(start.container);
    var ender = htmlEl(end.container),
        parenter = htmlEl(range.parent());

    curStart = $(starter).addClass('start');
    curEnd = $(ender).addClass('end');
    curParent = $(parenter).addClass('parent')
    $("#info").html("startOffset = " + start.offset
        + "\nendOffset = " + end.offset
        + "\ntext = " + range.toString())
})

body {font-family: verdana; padding: 5px;}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.start {
    border-left: solid 3px green;
}
.end {
    border-right: solid 3px red;
}
.parent {
    outline: dotted 2px gray !important;
}
#box {
    width: 400px;
    outline: 1px solid #ACACAC;
    padding: 10px;
}

h1 {
    margin-bottom: 10px;
}

pre {
    margin-top: 10px;
}