How can I highlight the inner text of an HTML article element by index with just vainilla js?

Question

Let's say I have an HTML document with the following body:

<style>
  .highlighted {
    color: red;
    background-color: yellow;
  }
</style>

<article>My text in an element</article>

I have the challenge to style the i letter from the in word inside the <article> tag with javascript, and I'm required to do it by it's index [8]. So far I can only think of starting with this...

<script>
  const article = document.querySelector('article').innerText
  console.log(article[8]);
</script>

Expected output:

<article>My text <span class="highlighted">i</span>n an element</article>

// Console
>>>> "i"

...although I've never tried anything like this before, so I'm kinda lost with the following steps.

I supose I need to insert a <span> tag by this index, but I'm not sure how I would set the closing </span> tag or update the DOM.

What would be a good way to achieve this kind of styling?

What sort of "styling" result are you expecting? [This code](https://stackoverflow.com/a/59473451/6243352) shows how to figure out which word is under the cursor, then you can wrap it in a `` or whatever you like. — ggorlen, Nov 17 '21 at 22:54
Any kind of highlighting, making both the text red and the text's background yellow is preferable. — Lord Reptilia, Nov 17 '21 at 22:56
What do you mean with "its index"? articleElement.textContent[8] is just the letter "i", there is nothing to style because it's plain text. If you need things styled, you're going to have to take the text, _chop it up_ into three strings (before your string, your string, and after your string) and then replace your string with a HTML element like a `` that you can then assign a class to (or set `style` values on, but don't do that: use classes). — Mike 'Pomax' Kamermans, Nov 17 '21 at 23:02
Thank you for your feedback! The word `in` would start by the [8] index, I supose I need to insert a `` tag by this index, but I'm not sure how I would set the closing `` tag or update the DOM. I've edited the question trying to clarify for everyone. — Lord Reptilia, Nov 17 '21 at 23:09

score 1 · Answer 1 · answered Nov 17 '21 at 23:03

const HIGHLIGHT_IDX = 8;
const article = document.querySelector('article').innerText;
const words = article.split(' ');
let highlightCheck = words[0].length;
let wordToHighlight = words[0].length >= HIGHLIGHT_IDX && '0';
let wordIdx = 1;

while (!wordToHighlight) {
  highlightCheck += 1 + words[wordIdx].length;
  if (highlightCheck >= HIGHLIGHT_IDX) {
    wordToHighlight = wordIdx;
  } else {
    wordIdx += 1;
  }
}

words[wordToHighlight] =
  `<span class="highlight">${words[wordToHighlight]}</span>`;

document.querySelector('article').innerText = words.join(' ');

score 1 · Accepted Answer · answered Nov 17 '21 at 23:09

//get text of article
const article = document.querySelector('article').innerText;

//find index of word 'in'
const index = article.indexOf('in');

//opening and closing tags
const openingTag = '<span style="color:red">'
const closingTag = '</span>'

//insert tags into article
const newHTML 
  = article.slice(0, index) 
  + openingTag + 'in' + closingTag 
  + article.slice(index + 2);
document.querySelector('article').innerHTML = newHTML;

This code styles the first occurrence of the word "in" by setting the text color to red. If you want to do something else, change the style attribute of the opening tag.

article.slice(0, index) returns everything before the word "in." In your example, this would evaluate to 'My text '. article.slice(index + 2) returns everything after the word "in" because "in" is 2 letters long. In your example, this would evaluated to ' an element'. When all the strings are concatenated together, the result is 'My text <span style="color:red">in</span> an element'.

Thank you so much for reviewing! This definitely looks like the answer I'm looking for. I'll strongly consider marking as the solution. — Lord Reptilia, Nov 17 '21 at 23:14

How can I highlight the inner text of an HTML article element by index with just vainilla js?

2 Answers2