如何获取文本框中的行数？

Question

如何获取文本框中的行数？

46

我想要的是计算一个文本域中的行数，例如：

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

- Ali

16个回答

40

如果你只是想测试硬回车，那么这将在跨平台上起作用：

var text = $("#myTextArea").val();   
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4

- Doug Neiner

1

如果你不想计算末尾的空行，你甚至可以在 .val() 后加上 .trim()：$("#myTextArea").val().trim(); - Jarrod

27

我已经在字符串的原型中实现了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); }

希望有人能提供更好的正则表达式或其他解决方法。

- hector-j-rivas

经过进一步的测试，我发现在IE9以外的浏览器中，最后一个换行符和结束标记之间的任何空格都将被视为在split-in中额外的元素。 - hector-j-rivas

这篇帖子有点旧了，但只是提供一些信息，我认为我找到了一个解决方法：使用contenteditable元素代替文本区域：https://dev59.com/EH7aa4cB1Zd3GeqPmSf8#22732344... - benomatis

当我按回车键时它可以工作，但是对于出现在几行中的长文本它无法正常工作。 - RaV

1

你是如何添加文本的？你什么时候尝试获取计数？确保在添加初始文本后触发计数...文本有多长？没有特定的限制，但理论上64K是限制。此外，请确保您的文本区域未定义maxLength属性。最后，这是纯JavaScript，适用于任何JavaScript字符串，只是碰巧OP想将其应用于文本区域的值（一个JavaScript字符串）。 - hector-j-rivas

这是无意义的。长行文本没有空格被包裹在文本区域内，而且没有\n来分割。 - Roko C. Buljan

@RokoC.Buljan，不确定没有空格的长行是否被认为是人类可读的“文本”；您需要将它们分开并使用一些换行算法来获取行（Mottie的答案暗示了这个问题）。该答案是针对OP关于按照新行字符定义断开行的问题。 - hector-j-rivas

9

user \n instead of \r

var text = $("#myTextArea").val();   
var lines = text.split("\n");
var count = lines.length;
console.log(count);

- Marek Karbarz

4

然而，如果您需要使用它并且它可以解决您的问题，那么这个方案是可行的。

let text = document.getElementById("myTextarea").value;   
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);

- Ir Calif

3

这个函数用来计算文本区域中有文字的行数：

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

- Tran Duy

3

那么用"\n"来分割呢？

如果文本区域中的一行被换行为两行，这也会成为一个问题。

要像这样准确地进行操作，您可以使用等宽字体并测量像素。不过这可能会有问题。

- alex

这并不糟糕...我在我的答案中使用了这种方法。 - Mottie

2

通过计算换行符并不是一种可靠的方法来查找文本中的行数，因为长文本可能会简单地折断而仍然只计数为一行。你想做的是查找文本区域的scrollHeight，然后除以单行的高度。

这里详细回答了这个问题: https://dev59.com/dHI-5IYBdhLWcg3wn525#1761203

- Philipp Poropat

1

我使用了Mottie的原始答案，但是在JQuery API中有些函数已经改变。这里是适用于当前API v3.1.0的工作函数：

var lht = parseInt($('#textarea').css('lineHeight'),10);
    var lines = $('#textarea').prop('scrollHeight') / lht;
    console.log(lines);

所有的赞都给Mottie的答案！

- Quispie

1

这将考虑同时具有硬回车和软回车的行：

    //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));

- milesholt

这并不考虑最后一个空格的位置来进行自动换行，因为软回车并不总是发生在每一行的字符数上，但这是一个不错的开始 ;) - qdev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mottie · Accepted Answer

使用 "\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