javascript - 单击段落中的单词后如何获得到目前为止的字数？

Question

我这里有这个脚本 -

//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>

...我知道如何提醒点击的词，但我的目标是点击一个词，让它提醒那个词，以及它在元素中的当前位置。

例如，在这一段中:

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

我点击“坐”这个词，警报会显示“坐”这个词，从头开始是 4 个词，或者到目前为止是 4 个词，等等。

我似乎无法统计字数。

Answer 1

检查range改变后的startOffset，然后slice元素的textContent到在选择之前获取所有文本。从那里，您可以检查 \w+ (单词字符子字符串)在其中出现的次数，这将是单词的数量:

//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>