Highlight the sentence in the paragraph

Question

1.00/5 (1 vote)

See more:

<!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;

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');
}

What I have tried:

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.

Posted 16-Jul-22 5:45am

Amer Auof

Updated 18-Jul-22 2:29am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Maciej Los · Answer 1 · 2022-07-17T09:03:00

Solution 3

I'd suggest to use this: mark.js – JavaScript keyword highlight[^]

For raw version, see this: highlighting - How to highlight text using javascript - Stack Overflow[^]

Posted 17-Jul-22 9:03am

Maciej Los

SashaGamer 1993 · Answer 2 · 2022-07-17T01:22:00

Solution 2

Hello! for this question you need to do this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 </head>
<body>
<p style="background-color: yellow;" 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>

Posted 17-Jul-22 1:22am

SashaGamer 1993

Comments

Graeme_Grant 17-Jul-22 7:51am

This is not a valid answer. You forgot the JavaScript required to do what he wants.

Amer Auof 18-Jul-22 8:32am

"Is it possible to join the above code with the below code to run it in MIT App ?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
 }
</style>
<script>
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) {
 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);
}
</script>
</head>
<body>
<!--
<div><p id="debug">||---||</p></div>
-->
<script>
var oSentence = "sntnce1";
var nSentence = 'b';
document.write(window.AppInventor.getWebViewString());
</script>
<script>
//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;
document.getElementById(nSentence).classList.add("highlight");
var elem1 = document.getElementById(window.oSentence);
if(typeof(elem1) != 'undefined' && elem1 != null){
elem1.classList.remove("highlight");
}
var target = nSentence.substr(6) - 1;
var elem2 = document.getElementById("sntnce"+target);
if(typeof(elem2) != 'undefined' && elem2 != null) {
smoothScroll(elem2);
}
window.oSentence = nSentence;
//elemDebug.innerHTML = nSentence + " equal! " + window.oSentence;
}
}
}, 1000);
smoothScroll(document.getElementById('sntnce1'));
</script>
</body>
</html>

This is my .apk

https://drive.google.com/file/d/1nmHL-cR-DjsUBRnnPd8diRMGkynfOhwV/view?usp=sharing

Thank you so much for helping me.