CODEWITHSUNDEEP
javascripthtml
user11877626
user11877626

Reputation:

How to select word from sentence using javascript?

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, wordsand 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

Upvotes: 2

Views: 1280

Answers (2)

GalAbra
GalAbra

Reputation: 5148

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>

Upvotes: 2

Weber
Weber

Reputation: 75

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>

Upvotes: 0

Related Questions