如何使用jQuery在文本框中单击单词索引

Question

Get index of word in a textbox

我想从文本框中获取单词“Amit”的索引为3，不包括鼠标单击事件上的任何空格/标点符号。如代码段中所述。

目前我正在使用以下内容来获取所单击单词的字符位置，但我想要的是使用jQuery中的.on函数的单词位置。

$("#idTable1 > tbody > tr").on('click', function (e) 
{
var start = document.getElementById("inputTxt").selectionStart;
var end = document.getElementById("inputTxt").selectionEnd;

  

编辑：如果在句子中重复选择的单词，那么它应该是fecth   所选单词的索引，而不是第一个/剩余的出现   示例：我的名字是Amit。 Amit年龄22岁。   所以，如果我在Amit中选择“Amit”是22岁，它应该给我适当的鼠标点击索引 - 索引 - ＆gt; 5

My -> 0
name -> 1
is -> 2
Amit -> 3
. -> 4
Amit -> 5
is -> 6
22 -> 7
years -> 8
old -> 9

所以，如果我从该句中选择任何单词，它应该给我相应的单词索引。

任何指针都有助于解决这个问题。

Answer 1

您可以使用以下代码段。

var text = document.getElementById("inputTxt").value;
console.log(text.split(" ").indexOf("Amit"));
//--------->split the text and find the index

示例：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#idTable1 > tbody > tr").on('click', function(e) {
    var text = document.getElementById("inputTxt").value;
    console.log(text.split(" ").indexOf("Amit"));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="idTable1">
  <tbody>
    <tr>
      <td>
        <input type="text" id="inputTxt" value="My Name Is Amit" />
      </td>
    </tr>
    <tr><td>Click here</td></tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

修改

您可以使用以下代码段获取具有element.selectionStart属性的鼠标选定单词的索引。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#idTable1 > tbody > tr").on('click', function(e) {
    var text = document.getElementById("inputTxt").value,
      element = $("#inputTxt")[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;
        }
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="idTable1">
  <tbody>
    <tr>
      <td><input type="text" id="inputTxt" value="My name is Amit. Amit is 22 years old." />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新：试试这个

$(function(){
	$(document).on('click', '#idTable1 > tbody > tr', function (e) {
		var ret = getSelectedWordIndex($("#inputTxt").val(), window.getSelection().toString(), $("#inputTxt")[0].selectionStart, $("#inputTxt")[0].selectionEnd);
		console.log(ret);
	});
	
	function getSelectedWordIndex(fullText, selectedText, start, end){
		var sp = fullText.split(" "),
		pointer = 0,
		result = false;
		$.each(sp, function(i,e){
			if(!result){
				if(e == selectedText){
					if(pointer == start){
						result = sp.indexOf(selectedText, i);
						return false;
					}
				}
				pointer = pointer + e.length + 1;
			}
		});
		return result;
	}
})

<table id="idTable1"><tbody><tr><td><button>clickme</button></td></tr></tbody></table>

<textarea id="inputTxt" style="width:100%" >abc def abc def abc def abc def abc def abc def</textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>