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

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.

Highlight the sentence in the paragraph

2 solutions

Solution 3

Solution 2

Add your solution here

Preview 0

Highlight the sentence in the paragraph

2 solutions

Solution 3

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us