我想要的是计算一个文本域中的行数,例如:
line 1
line 2
line 3
line 4
应该数到4行。基本上按一次回车键会转到下一行
以下代码无法工作:
var text = $("#myTextArea").val();
var lines = text.split("\r");
var count = lines.length;
console.log(count);
无论有多少行,它总是返回“1”。
我想要的是计算一个文本域中的行数,例如:
line 1
line 2
line 3
line 4
应该数到4行。基本上按一次回车键会转到下一行
以下代码无法工作:
var text = $("#myTextArea").val();
var lines = text.split("\r");
var count = lines.length;
console.log(count);
无论有多少行,它总是返回“1”。
使用 "\n" 或 "\r" 的问题是它只计算回车符的数量,如果你有一行很长的代码,它可能会换行,那么这一行就不会被计算为新行。这是获取行数的另一种方法 - 所以它可能不是最好的方法。
编辑(感谢Alex):
脚本
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
更新:这里有一个更加详细的答案:https://dev59.com/dHI-5IYBdhLWcg3wn525#1761203
如果你只是想测试硬回车,那么这将在跨平台上起作用:
var text = $("#myTextArea").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
.val()
后加上 .trim()
:$("#myTextArea").val().trim();
- Jarrod我已经在字符串的原型中实现了lines和lineCount方法:
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
显然,split方法在IE9中不会计算字符串末尾(或textarea的innerText属性)的回车符和/或换行符,但在Chrome 22中会计算它,从而导致不同的结果。
到目前为止,我通过在浏览器不是Internet Explorer时从行数中减去1来适应这种情况:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
希望有人能提供更好的正则表达式或其他解决方法。
contenteditable
元素代替文本区域:https://dev59.com/EH7aa4cB1Zd3GeqPmSf8#22732344... - benomatis\n
来分割。 - Roko C. Buljanuser \n
instead of \r
var text = $("#myTextArea").val();
var lines = text.split("\n");
var count = lines.length;
console.log(count);
let text = document.getElementById("myTextarea").value;
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);
这个函数用来计算文本区域中有文字的行数:
function countLine(element) {
var text = $(element).val();
var lines = text.split("\n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
那么用"\n"来分割呢?
如果文本区域中的一行被换行为两行,这也会成为一个问题。
要像这样准确地进行操作,您可以使用等宽字体并测量像素。不过这可能会有问题。
通过计算换行符并不是一种可靠的方法来查找文本中的行数,因为长文本可能会简单地折断而仍然只计数为一行。你想做的是查找文本区域的scrollHeight,然后除以单行的高度。
这里详细回答了这个问题: https://dev59.com/dHI-5IYBdhLWcg3wn525#1761203
我使用了Mottie的原始答案,但是在JQuery API中有些函数已经改变。这里是适用于当前API v3.1.0的工作函数:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
这将考虑同时具有硬回车和软回车的行:
//determine what the fontsize will be
let fontsize = 12;
//get number of characters that can fit in a row
let charsperrow = textarea.clientWidth / fontsize;
//get any hard returns
let hardreturns = textarea.textContent.split(/\r|\r\n|\n/);
let rows = hardreturns.length;
//loop through returns and calculate soft returns
for(let i = 0,len = rows; i < len; i++){
let line = hardreturns[i];
let softreturns = Math.round(line.length / charsperrow);
//if softreturns is greater than 0, minus by 1 (hard return already counted)
softreturns = Math.round(softreturns > 0 ? (softreturns - 1) : 0);
rows += softreturns;
}
console.log(Math.round(rows));
var lineheight = $('textarea#my-textarea').css('line-height');
减少维护工作。 - alexprop
替换attr
,至少在我的情况下,attr
无法正常工作,每次都会返回未定义... - benomatisprop()
而不是attr()
(参考链接)。 - Mottievar padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
- dnlmzw