0

Say I have the following string in Javascript

let str = "This is an example string";

Suppose I highlight the word example (like in Microsoft Word when you want to make a word bold or underlined), how do I get this word's starting and ending index inside of the string str in Javascript? How do I get the values 11 and 17?

So far, everything I tried failed because I could not get these indexes. Working with substrings was of no avail either because you either have to know the string's starting and ending index already or you have to deal with a string in which the selected word is unique.

The above string would be in a contenteditable div.

I should add that Javascript is usually not a strong point of mine, just in case the solution to this should turn out to be all too basic.

AlexM
  • 325
  • 4
  • 11
  • research `indexOf` and adding 6, since you know the length of the word you're looking for – Jaromanda X Sep 14 '19 at 01:43
  • I have, but this only returns the first occurance of the selected section. However, more often than not, the selected word might not be unique in the string, so if the e. g. its second occurrence is selected, then I would get the first one. The example above really was just an example, I am looking for a general solution. – AlexM Sep 14 '19 at 01:45
  • look at using the **second** argument to `indexOf` in a loop - it's in the documentation, which you claim to have read – Jaromanda X Sep 14 '19 at 01:46
  • oh, wait ... you want the index of selected string in a contenteditable div? what does that have to do with a javascript variable whose content is a string? – Jaromanda X Sep 14 '19 at 01:49
  • This was just to reduce the problem to its core. In the function I am looking for, I could just put the div's content in a variable, modify it and put it back. However, since I have no idea how to come up with a general solution, I don't know whether this would be feasable. – AlexM Sep 14 '19 at 01:53
  • are you wanting to "do something" with text selected on a webpage? https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection – Jaromanda X Sep 14 '19 at 02:20

2 Answers2

1

While you could try and get the word's starting and ending index within your string, it may be easier for you to replace your word with the search word itself, wrapped in HTML tags which will highlight the word for you. To achieve this you can use .replace() with a regular expression of your word to replace all occurrences of your given word in your string:

let str = "This is an example string and this is the word example again  xxexamplexx";
let word = "example";

str = str.replace(new RegExp(word, 'g'), `<span class="highlight">${word}</span>`);
console.log(str);

document.body.innerHTML = str;
.highlight {
  background: yellow;
}

The above will highlight any occurrences of the word "example" even if it isn't standalone (eg: xxxexamplexxx). To match only standalone occurrences of examples you can modify your regular expression to use word boundaries (\b)

let str = "This is an example string and this is the word example again  xxexamplexx";
let word = "example";

str = str.replace(new RegExp('\\b'+word+'\\b', 'g'), `<span class="highlight">${word}</span>`);
console.log(str);

document.body.innerHTML = str;
.highlight {
  background: yellow;
}
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • 1
    i was about to comment for using `\\b` but in one of comment op said selection is user dependent so it can be any random string, anyways +1 – Code Maniac Sep 14 '19 at 02:29
-1

You can use indexOf.

 let str = "This is an example string";
 console.log(str.indexOf("example")) // Would return 11

To return the end Index check out this question: JavaScript indexOf from end of search string

Felix G
  • 724
  • 5
  • 17
  • I know, but quite often the selected word (or portion) is not unique in a given string, so in that case I would always get the first occurrence or at least know an index after which to start the search so that the selected word becomes the first occurrence. – AlexM Sep 14 '19 at 01:54
  • You didn't mention you want a specific occurrence of the word to be selected. How do you know which occurrence to highlight? You might want to use `lastIndexOf` – Felix G Sep 14 '19 at 01:58
  • It's not me who will highlight a word, but a user. What my program needs to do is get the starting and ending indexes of the user's selection. By the way, I did not downvote. – AlexM Sep 14 '19 at 02:00
  • 1
    Ohh, that's what you meant. Nick's answer should be what you're looking for. – Felix G Sep 14 '19 at 02:02
  • There are no restrictions as to what the user can select. Think of it like in Microsoft Word where you can select any portion of text before making it bold or underlined or changing its font size. – AlexM Sep 14 '19 at 02:05
  • 1
    @AlexM [`nicks answer`](https://stackoverflow.com/a/57931903/9624435) will lead you in right direction for your use case – Code Maniac Sep 14 '19 at 02:27