This should be easy, although I spent over 4 hours and nothing! I REALLY need to add a counter for <br /> tag, inside an specific DIV CLASS, to count lyric lines, and "echo" the corresponding number on each line right before the <br />. I understand that this can´t be done by css, like happens with <p>, because <br /> won´t allow before and after css conditionals. Will really appreciate the help.
Example:
Every time when I look in the mirror 1
All these lines on my face getting clearer 2
The past is gone 3
And it went by, like dusk to dawn 4
Isn't that the way? 5
Everybody's got their dues in life to pay 6
Yeah, I know nobody knows 7
Where it comes and where it goes 8
I know it's everybody's sin 9
You got to lose to know how to win 10
In PHP, you can use explode function to extract all new lines as below
$arr=explode(PHP_EOL, $lyrics);
foreach($arr as $index=>$ele){
echo $ele.$index+1.'<br>';
}
If you are getting another issues please fill free to comment.
If each line is a <p> you can do that to replace each <br>
var listElements = document.getElementsByTagName('br')
for(var i = 1; i <= listElements.length; i++){
var line = listElements[i-1].parentElement.innerHTML
listElements[i-1].parentElement.innerHTML = line.replace('<br', i+'<br')
}<p>Every time when I look in the mirror <br /> </p>
<p>All these lines on my face getting clearer <br /></p>
<p>The past is gone <br /></p>
<p>And it went by, like dusk to dawn <br /></p>
<p>Isn't that the way? <br /></p>
<p>Everybody's got their dues in life to pay <br /></p>
<p>Yeah, I know nobody knows <br /></p>
<p>Where it comes and where it goes <br /></p>
<p>I know it's everybody's sin <br /></p>
<p>You got to lose to know how to win <br /></p>You can simply count the numbers of any tags from simple javascript code.
let countbr = document.getElementsByClassName('count-br')[0].getElementsByTagName('br').length;
console.log('Total </br> count on class count-br: ',countbr);<div class="count-br">
This page has 4 br
</br>
test
</br>
test test test
</br>
</br>
</div>
<div class="donot-count-br">
This section has 3 br
</br>
test
</br>
test test test
</br>
</div>