javascript - Obtaining a DOM Range by clicking anywhere within an Element -

given following html...

<p>today <span data-token="datetime.dayofweek">$$dayofweek$$</span>, </p> <p>tomorrow next day, etc, etc....</p> 

clicking on $$dayofweek$$ returns dom range object (via component, wysiwig editor bundled kendoui).

i can access entire element so...

var element = range.startcontainer.parentelement; console.log(element); 

which outputs...

<span data-token="datetime.dayofweek">$$dayofweek$$</span> 

what trying figure out how construct range object consists of entire element, range.

the desired 'high level' behaviour single click piece of text, , have browser select text within element, returning range object.

happy accept jquery solution.

html

<p>today <span data-token="datetime.dayofweek">$$dayofweek$$</span>,</p> <p>tomorrow next day, etc, etc....</p> 

js

var span = document.queryselector('[data-token]');  span.addeventlistener('click', function() {     var sel = window.getselection();     var range = document.createrange();     sel.removeallranges();     range.setstart(span.childnodes[0], 0);                           range.setend(span.childnodes[0], span.innertext.length);     sel.addrange(range);                       }); 

here's fiddle you: http://jsfiddle.net/v66zh/2/

it' might not super cross browser, works in chrome. see javascript set window selection additional optimizations elsewhere.

also assumes 1 childnode in example html

some additional reference ranges (https://developer.mozilla.org/en-us/docs/web/api/range) , selections (https://developer.mozilla.org/en-us/docs/web/api/selection)