How to count symbols in each line of text?

Question

I have some text in a pre tag with a fixed width and I need to count how many characters in each line of this chunk of text. For example, in the sample below first line has 80 characters, 2nd has 79, 3rd - 81 and so on. When we have an empty string with a newline it should be just 1.

pre {
    display: block;
    white-space: pre-wrap;
    background: white;
    border-color: white;
    word-break: normal;
    width: 600px;
}

<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</pre>

Is this even possible to do?

[This approach](http://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery) uses jQuery but if you're looking for a vanilla solution, it ought to give you some ideas. — Mike Cluck, Jul 27 '15 at 17:04
@MikeC That is not exactly what I'm looking for, and also I'm trying to avoid using jQuery but thanks anyway! Digging that code right now actually. — Gaz, Jul 27 '15 at 18:17

score 2 · Accepted Answer · edited May 23 '17 at 10:24

Folowing the approach found at How can I count text lines inside an DOM element? Can I? I finally managed to achieve the code below. The tricky part is that the line-height must be given with css, so we can calculate the number of lines.

[update]

Code updated so that it works at firefox

<html>
    <head>
        <style>
            pre {
                display: block;
                white-space: pre-wrap;
                background: white;
                border-color: white;
                word-break: normal;
                width: 600px;
                line-height: 1.14em; /* must be defined to work */
            }
        </style>
    </head>
    <body>
        <pre id="preContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</pre>
        <script>
            function calcLineChars(elem){
                var cpy = elem.innerHTML;
                var totalLines = countLines(elem);
                elem.innerHTML = '';
                var result = [];
                var charCounter = 0;
                var lastCount = 0;
                for(var i = 0; i < totalLines; i++){
                    console.log(i);
                    elem.innerHTML += cpy[charCounter];
                    while((i + 1) == countLines(elem) && charCounter < cpy.length - 1){
                        charCounter ++;
                        elem.innerHTML += cpy[charCounter];
                    }
                    charCounter ++;
                    var currentLength;
                    if((i + 1) != countLines(elem)){
                        currentLength = elem.innerHTML.substring(0, elem.innerHTML.lastIndexOf(' ')).length + 1;
                    }else{
                        currentLength = elem.innerHTML.length;
                    }
                    result.push(currentLength - lastCount);
                    lastCount = currentLength;
                }
                return result;
            }

            function countLines(elem) {
                var elemHeight = elem.offsetHeight;
                var lineHeight = elem.style.lineHeight || document.defaultView.getComputedStyle(elem, null).getPropertyValue("line-height");
                if(lineHeight.indexOf('px') != -1){
                    lineHeight = lineHeight.substring(0, lineHeight.length - 2);
                }
                lineHeight = parseFloat(lineHeight);
                var lines = elemHeight / lineHeight;
                var intLines = parseInt(lines);
                if(lines - intLines >= 0.1){
                    intLines ++;
                }
                return intLines;
            }

            var lineChars = calcLineChars(document.getElementById('preContent'));
            var message = '';
            for(var i = 0, current; current = lineChars[i]; i++){
                message += '\n' + 'line ' + (i + 1) + ' has ' + current + ' chars';
            }
            alert(message);
        </script>
    </body>
</html>

Thanks again. And btw, your code ignores newline chars and all the text which goes after that. — Gaz, Jul 27 '15 at 19:29

score 0 · Answer 2 · answered Jul 27 '15 at 19:02

You loop through the text and count until you found a line break element. When you encounter a newLine character push count to array and start count from zero for new line

   input= document.getElementById("countDiv").innerHTML();
    var length = input.length;
    var lines=[]//number lines 
    var count=0;//counting character at each line
    for ( var i = 0; i < length; i ++ )
    {
    if (input.charAt(i)=='\n')
    {
    lines.push(count);
    count=0;
    }
    else{
    count=count+1;
    }

    }

score -1 · Answer 3 · answered Jul 27 '15 at 17:37

-1

Hello this is what I came up with.

//html
<pre id="countDiv">monkeyman</pre>
//JS
var x = document.getElementById("countDiv");
var y = x.innerHTML;
console.log(y.length);

answered Jul 27 '15 at 17:37

Modig

985
2
9
20

2

And for the example text the OP posted, how does your answer count the length of each line? – j08691 Jul 27 '15 at 17:39
What does this have to do with coding? – Modig Jul 27 '15 at 18:25

How to count symbols in each line of text?

3 Answers3