<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; }