[英]How to count symbols in each line of text?
我在固定寬度的pre標簽中有一些文本，我需要計算這塊文本的每一行中有多少個字符。 例如，在下面的示例中，第一行有80個字符，第二行有79個字符，第三行-81等。 當我們有一個帶有換行符的空字符串時，它應該僅為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>
這有可能嗎？
遵循“ 如何計算DOM元素內的文本行”中找到的方法？ 我可以嗎？ 我終於設法實現了以下代碼。 棘手的是，行高必須使用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>
您遍歷文本並計數直到找到換行元素。 當遇到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;
}
}
您好，這是我想出的。
//html
<pre id="countDiv">monkeyman</pre>
//JS
var x = document.getElementById("countDiv");
var y = x.innerHTML;
console.log(y.length);
如何計算用戶在文本表單中輸入的特定符號的數量
[英]How to count the amount of specifc symbols that a user has entered in a text form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.