Highlight the sentence in the paragraph

Osama ghanem · July 16, 2022

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 </head>
<body>
<p id="test">
  (1) Lorem ipsum dolor sit amet. (2) consectetur adipisicing elit. (3) Similique aliquam totam odit excepturi. (4) reiciendis quam doloremque ab eius quos.
</p>
</body>
</html>
.selected {
  background: yellow;
<script>
  paragraph = document.getElementById('test');
paragraph.innerHTML = '<span>' + paragraph.textContent.trim().replaceAll(/\.\s/g,'. </span><span>') + '</span>';

sentences = paragraph.querySelectorAll('span');
sentences.forEach(s => s.addEventListener('click', highlight));

function highlight(event) {
  sentences.forEach(s => s.classList.remove('selected'));
  event.target.classList.add('selected');
}
  </script>

I want to highlight the sentence just when I click on it in the paragraph but also to be able to programmatically select a span without clicking on it (I need this when the reading continues from span to span for using sound mp3 purpose).

Can it also allow for line breaks in the paragraph?

I hope that it is possible to make these changes in my code.

dsonesuk · July 16, 2022

8 hours ago, Osama ghanem said:

I want to highlight the sentence just when I click on it in the paragraph but also to be able to programmatically select a span without clicking on it (I need this when the reading continues from span to span for using sound mp3 purpose).

You have variable sentences representing each span, just refer using index and trigger click event.

var timer = setInterval(myFunction,  5000);
var i = 0;
function myFunction(){
sentences[i].click();
i++;
  if(i >= sentences.length){
  i=0;
  }
}

So at specific track time you can simply use sentences[0].click(); for highlight of first sentence sentences[1].click(); for second... so on.

Sign In

Highlight the sentence in the paragraph

Recommended Posts

Osama ghanem

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity