单击单词上的任意位置获取文本区域内单词的位置编号 - JQuery

Question

这是我的代码。只有当我点击任何单词的第一个字母时它才有效。然后它给了我那个词的位置，比如第一个词为 0，第二个词为 1 等等。但是当我点击中间或任何地方时，它不会占用位置编号，直到我不点击第一个字母的开头. 这是我的代码运行:

$("#checktext").on('click', function(e) {
         var text = document.getElementById("checktext").value,
        element = $("#checktext")[0],
        arr1 = text.split(" "),
        length = 0,
        selectIndex = element.selectionStart;
         if (selectIndex == 0) {
        console.log(arr1.indexOf(arr1[0]));
         } else {
        for (var i = 0; i < arr1.length; i++) {
             length = length + arr1[i].length + 1;
             if (length == selectIndex) {
            console.log(i + 1);
            break;
             }
        }
        }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<textarea id="checktext">This will only work if click on start of each letter.</textarea>

Answer 1

问题在于您的情况：

length == selectIndex

这仅适用于每个单词的第一个字母。但是您希望每个单词的字母范围都为真：

selectIndex >= startOfWord && selectIndex <= endIndexOfWord

$("#checktext").on('click', function(e) {
  var text = document.getElementById("checktext").value,
    element = $("#checktext")[0],
    arr1 = text.split(" "),
    length = 0,
    selectIndex = element.selectionStart;
  for (var i = 0; i < arr1.length; i++) {
    let start = length; // start index of the next word to check
    length = length + arr1[i].length; // end index of your next word to check
    if (selectIndex >= start && selectIndex <= length) {
      console.log("Selected Index: " + i);
      break;
    }
    length++; // add the whitespace after the check
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="checktext">This will only work if click on start of each letter.</textarea>

此外：您可能应该使用不同的变量名称而不是 length。它不是长度，而是你的单词的结束索引。我想这就是发生此错误的部分原因，您希望该变量与实际情况有所不同。

单击单词上的任意位置获取文本区域内单词的位置编号 - JQuery

Onclick anywhere on word get position number of word inside textarea - JQuery

javascript

jquery

string

position