How to get word count so far after clicking on word in paragraph?

Question

I have this script here -

 //Click word, alert position $(".content").click(function(e){ s = window.getSelection(); var range = s.getRangeAt(0); var node = s.anchorNode; while(range.toString().indexOf(' ') != 0) { range.setStart(node,(range.startOffset -1)); } range.setStart(node, range.startOffset +1); do{ range.setEnd(node,range.endOffset + 1); }while(range.toString().indexOf(' ') == -1 && range.toString().trim() != ''); var str = range.toString().trim(); alert(str); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="content">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.</p>

...and I understand how to alert the word clicked on, but my goal is to click on a word, and have it alert that word, and it's current position in the element.

For example, in this paragraph:

<p>Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt</p>

I click the word 'sit', the alert will display the word sit, and that it's 4 words from the beginning, or it's 4 words so far, etc.

I can't seem to land the word count.

Answer 1

Check the startOffset of the range after it's been altered, then slice the textContent of the element to get all text before the selection. From there, you can check the number of occurences of \\w+ (word characters substrings) in it, which will be the number of words:

 //Click word, alert position $(".content").click(function(e) { s = window.getSelection(); var range = s.getRangeAt(0); var node = s.anchorNode; while (range.toString().indexOf(' ') != 0) { range.setStart(node, (range.startOffset - 1)); } range.setStart(node, range.startOffset + 1); do { range.setEnd(node, range.endOffset + 1); } while (range.toString().indexOf(' ') == -1 && range.toString().trim() != ''); const { startOffset } = range; const wordsBeforeStart = this.textContent .slice(0, startOffset) .match(/\\w+/g) .length; var str = range.toString().trim(); console.log(str + ' is ' + (wordsBeforeStart + 1) + 'th word after the start'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="content">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.</p>