CODEWITHSUNDEEP
javascriptjqueryhtmlcss
amit gupta
amit gupta

Reputation: 45

How to get clicked word Index in textbox using jQuery

Get index of word in a textbox

I want to get the index of word "Amit" as 3 from the textbox, excluding any space/punctuation marks on mouse click event. As described in the snippet.

Currently I am using the following to get character position of the clicked word, but what I want is the word position using the .on function in jQuery.

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

Edit: If the word selected is repeated in the sentence it should fecth the index of the selected word and not the first/remaining occurances Example: My name is Amit. Amit is 22 years old. So, if I select "Amit" in Amit is 22 years old, it should give me the appropriate index of mouse click that is index -> 5

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

So, if I select any word out of that sentence, it should give me the appropriate word index.

Any pointers would be helpful to solve this.

Upvotes: 2

Views: 902

Answers (2)

plonknimbuzz
plonknimbuzz

Reputation: 2664

UPDATED: try this

$(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>

Upvotes: 0

John R
John R

Reputation: 2801

You can use the following code snippets.

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

Example:

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

EDIT:

You can use the following code snippet for getting the index of mouse selected word with element.selectionStart property.

$(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;
        }
      }
    }
  });
});
<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>

Upvotes: 1

Related Questions