Highlight the sentence in the paragraph

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.

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'));
.selected {
  background: yellow;
<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<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.

type or paste code here

You have this working currently.

What have you tried so far?

What do you mean by allow for line breaks in the paragraph? What you are expecting it to do vs. what it is doing?

I have MIT App Inventor which has 114 paragarphs. Each paragaraph has 25 pages, each page has 50 sentences and when I click play button, it reads the sentences one by one with sync highlight every single sentence one by one because each sentence has start and stop timings.

OK. So what exactly are you needing now?

The above code is for highlighting the whole sentence when I click it. I just need to add it into my original code for my project and I will post it here.

<!DOCTYPE html>
<meta charset="UTF-8">
.highlight {
background-color: yellow;
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function (c, a, b, i) {
if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
 scroll(c, a, b, i);
}, 20);
// start scrolling
 scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
<div><p id="debug">||---||</p></div>
var oSentence = "sntnce1";
var nSentence = 'b';
//var elemDebug = document.getElementById("debug");
//elemDebug.innerHTML = window.oSentence;
window.setInterval(function () {
nSentence = window.AppInventor.getWebViewString();
if (nSentence.length < 10) {
//elemDebug.innerHTML = window.oSentence + " " + nSentence;
if (nSentence !== window.oSentence) {
//elemDebug.innerHTML = nSentence + " not equal! " + window.oSentence;
var elem1 = document.getElementById(window.oSentence);
if(typeof(elem1) != 'undefined' && elem1 != null){
var target = nSentence.substr(6) - 1;
var elem2 = document.getElementById("sntnce"+target);
if(typeof(elem2) != 'undefined' && elem2 != null) {
window.oSentence = nSentence;
//elemDebug.innerHTML = nSentence + " equal! " + window.oSentence;
}, 1000);

Here is my .apk

Is it possible to join thes codes together
Is it possible to join these codes together.
Thank you for helping me.

Hi Randell Dawson,
Would you please tell me if it can be joined?
Thank you so much.

I have not used that system before. I don’t have the time to install and learn how to use it today. I thought this was strictly a website app your were building.

Thank you very much RandelDawson.