如何使用javascript从句子中选择单词？

Question

Suppose I a complete sentence when I click on any of the words I was trying to highlight that word and read the value into a javascript variable.

If I click on the three words then all three words should be highlighted by green color and store the value as a string in a variable.

<p onclick="handleClicks()" class="word" >
  Select the choice words that make up the complete sentence.
</p>

Now if I click on Select , words and complete then it should be highlighted and all the selected values should be saved inside a variable in javascript.

Is it possible to do so using javascript?

What I tried is

const handlClicks = (event) => {
  const clickedElem = event.target
  clickedElem.classList.toggle('active');
}

But this does not work. should I use multiple span tag inside of the p tag and then apply a function to all the span

Answer 1

You can add the words dynamically, as they're wrapped within span elements.

Then add the logic by iterating them. For example:

 const sentence = 'Select the choice words that make up the complete sentence.'; const words = sentence.split(' '); document.getElementById('content').innerHTML = words.reduce((acc, word) => { return `${acc} <span class="word">${word}</span>`; }, ''); const elements = document.getElementsByClassName('word'); [...elements].forEach((element) => { element.addEventListener('click', () => { element.classList.toggle('selected'); }) });

 .word { cursor: pointer; } .selected { background-color: palegreen; }

 <div id="content"></div>

Answer 2

If you want select word's near search input, you can try this.

 function func(){ _func(); var search = document.getElementById('search'); var demo = document.getElementById('demo'); var bring = demo.innerHTML; var bloototh = bring.indexOf(search.value); if (bloototh >= 0) { bring = bring.substring(0,bloototh) + "<span id='index' class='style'>" + bring.substring(bloototh,bloototh+search.value.length) + "</span>" + bring.substring(bloototh + search.value.length); demo.innerHTML = bring; } } function _func(){ var index = document.getElementById('index'); if(index !== null){ index.outerHTML = index.innerHTML; } }

 input{ padding: 10px; margin: 10px; } .style { color: white; background: gray; }

 <input type="text" id="search"><br> <input onclick="func();" value="Show" type="button"> <p id="demo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>