Highlighting a different word in a list every few second using jquery

Issue

I've a list of words in the format "xxx - yyy - zzz", so " - " being the separator. What I'm hoping to do is simply increase the size of one of the words at random every few seconds so as to highlight that word.

My approach is wrap the list in a div:

<div id="highlight-list">XXX - YYY - ZZZ</a>

and then use something like this (not tested yet!):

var fullList = document.querySelector("#highlight-list");
var regex = // *- *//;
var eachItem = fullList.innerHTML.split(regex);
fullList.innerHTML = "";
for(var word in eachItem){
  fullList.innerHTML += "<span>" + eachItem[word] + "</span>";
}

to wrap individual words within the Div with a span. My grand plan is to then apply a CSS class to each span at random for a few seconds, then remove the class, and repeat... but I'm struggling with the first step!

Any help would be hugely appreciate, thank you.

Solution

Your code is close for a simple split of text (splitting on HTML is a different matter). Words can be split on a simple string:

var words = fullList.innerHTML.split(" - ");

Edit: update the snippet to show how to use .map to build the HTML

Extract the words into an array (either using original or as per updated snippet using jquery), then use .map on the array to iterate each element of the array and return a new string(html) for that array element. This returns a new array of strings (in this case). You then .join() this array with your separator to restore the original " - ".

var html = words.map((e) => `<span>${e}</span>`).join(" - ");

To highlight a random word every few seconds:

• use setInterval() to setup a repeating interval
• use Math.random() to get a random number
• add/remove a class to highlight each word

Updated snippet:

let words = $("#highlight-list").text().split(" - ");
let html = words.map((e) => `<span>${e}</span>`).join(" - ");
$("#highlight-list").html(html);

setInterval(() => {
   let spans = $("#highlight-list > span");
   spans.removeClass("highlight");
   
   let index = Math.floor(Math.random() * spans.length);
   //console.log(index, spans.length);
   spans.eq(index).addClass("highlight");
   
}, 1500);

#highlight-list > span { border:1px solid rebeccapurple; }
.highlight { color: white; background-color: rebeccapurple; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="highlight-list">XXX - YYY - ZZZ</div>

I've used jquery simply for convenience and as you had it tagged in the question. You shouldn't normally mix vanilla-js / jquery like this, but I didn't want to change your original too much.

---

Some notes:

• Change the 1500 to whatever interval you want (it's in ms) - for demo/testing it's easier to keep it low
• As there's only 3 words, the random() call has a 1-in-3 chance to get the same word each time (which is quite high). You could store the existing span and, if it's the same get a different index
• The console.log just there to show when it picks the same number twice

Answered By - freedomn-m