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?
3 answers
solution1
2 ACCPTED 2015-07-27 18:33:40
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>
solution2
0 2015-07-27 19:02:34
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;
}
}
solution3
-1 2015-07-27 17:37:22
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.