Identify Selected Word Position with Javascript

Question

I've got a single HTML element that contains a number of words:

<p>foo bar test test bar foo</p>

My user will use their mouse to highlight a selection of one or more words, for example the second word bar.

Does Javascript have a method that can identify where the selected word(s) exist? Ideally I'll learn that word number 4 was selected.

I know we can get the selection and create a range from that, but that doesn't help me identify the where as we're creating a new object. I can use the selection to search thru each word in the <p> element but that will give me bad information as the work bar is ambiguous - could be either word 1 or word 4.