Incremental counter right before each -CodePudding

This should be easy, although I spent over 4 hours and nothing! I REALLY need to add a counter for   tag, inside an specific DIV CLASS, to count lyric lines, and "echo" the corresponding number on each line right before the  . I understand that this can´t be done by css, like happens with , because   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

CodePudding user response：

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.

CodePudding user response：

If each line is a  you can do that to replace each  

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>

CodePudding user response：

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 >
  This page has 4 br
  </br>
test
</br>
test test test
</br>
</br>
</div>

<div >
  This section has 3 br
  </br>
test
</br>
test test test
</br>
</div>