Question

我在预标签中有一些固定宽度的文本，我需要计算这一块文本的每一行中有多少个字符。例如，在下面的示例中，第一行有80个字符，第二行有79，第三行 - 81等等。当我们有一个带换行符的空字符串时，它应该只有1。

＆＃13;

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

＆＃13;

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

＆＃13;

这甚至可以吗？

Answer 1

在How can I count text lines inside an DOM element? Can I?找到的方法，我终于设法实现了以下代码。棘手的部分是行高必须用css给出，所以我们可以计算行数。

<强> [更新]

代码已更新，以便在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>

Answer 2

循环遍历文本并计算，直到找到换行元素。当您遇到newLine字符时，将数量推送到数组并从零开始计数新行

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

    }

Answer 3

你好，这就是我想出来的。

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

如何计算每行文字中的符号？

3 个答案: