Question

我想要的是计算textarea中的行数，例如：

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

Answer 1

使用“\ n”或“\ r \ n”的问题是它只计算返回的数量，如果你有一条很长的线可以换行，那么它就不会被计算为新行。这是获取行数的另一种方法 - 因此它可能不是最佳方式。

编辑（感谢alex）：

脚本

$(document).ready(function(){
 var lht = parseInt($('textarea').css('lineHeight'),10);
 var lines = $('textarea').attr('scrollHeight') / lht;
 console.log(lines);
})

更新：这里有一个更全面的答案：https://stackoverflow.com/a/1761203/145346

Answer 2

如果您只是想测试硬线返回，这将跨平台工作：

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

Answer 3

我已经将lines和lineCount方法实现为String原型：

String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }

显然，split方法不会计算IE9中字符串末尾（或textarea的innerText属性）的回车符和/或换行符，但它会在Chrome 22中计算它，产生不同的结果。< / p>

到目前为止，当浏览器不是Internet Explorer时，我通过从行数中减去1来适应这一点：

String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }

希望有人有更好的RegExp或其他解决方法。

Answer 4

用户\n而不是\r

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

Answer 5

如果拆分“\ n”呢？

如果一行包裹在textarea中的2行，也会出现问题。

要像这样准确地做到这一点，你可以使用固定高度的字体并测量像素。但这可能会有问题。

Answer 6

此函数计算textarea中包含文本的行数：

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

Answer 7

但是，如果你需要使用它，这是有效的，因为它会回应你的问题

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

Answer 8

正常的换行符是“\ n”。某些系统的惯例是事先也有“\ r”，因此在这些系统中，“\ r \ n”经常被认为是一个新的线。在浏览器中，除非用户通过从其他地方复制它而故意输入“\ r”，否则换行符可能只表示为“\ n”。在任何一种情况下，按“\ n”分割将计算行数。

Answer 9

我使用了Mottie的原始答案，但在JQuery API中更改了一些功能。以下是当前API v3.1.0的工作函数：

{{1}}

所有人都为Mottie的回答而努力！

Answer 10

对换行进行计数不是查找行数的可靠方法，因为长文本可能会折断并且仍然仅计为一行。您要做的是找出文本区域的scrollHeight并将其除以单行的高度。

在这里详细回答： https://stackoverflow.com/a/1761203/9863305

Answer 11

<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>

Answer 12

你的回答可以用非常简单的方式完成。

var text = $("#myTextArea").val();

               // will remove the blank lines from the text-area
                text = text.replace(/^\s*[\r\n]/gm, "");

               //It will split when new lines enter
                var lines = text.split(/\r|\r\n|\n/);

             var count = lines.length; //now you can count thses lines.
                console.log(count);

此代码用于填写textarea中的确切行。并且肯定会工作。

Answer 13

这将旨在考虑具有硬性收益和软性收益的生产线：

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

Answer 14

您可以使用具有属性contenteditable="true"的div来代替textarea。在具有此属性的div上，您可以编写任何内容，就像在textarea中一样，但是任何新行（第一行除外）都自动包装在div内。您可以使用jQuery或JS来计算div的数量并添加+1，这是第一行。

这是没有道理的，我会在任何场合都使用它而不是textarea。它有几个优点。它会自动调整大小，您可以轻松计算空白行，可以自定义每个div或使用颜色或字体大小或任何其他内容添加跨度，可以使用任何line-height和任何font-size，还可以添加富文本功能还有更多，这对于SEO和其他功能来说更好。这是jQuery的工作示例：

    $("#Editor").on("keyup mouseup", function(){
        blankSpace = $(this).find("br").length; //count blank lines
        urlCounter = $(this).find("div").length + 1 - blankSpace;

        $(".lineCounter").text("Number of links: "+ urlCounter);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Editor" contenteditable="true" style="color:aqua;width: 100%;height: 100%;background: blue;"></div>
<div class="lineCounter" style="position: absolute;bottom: 0;z-index: 999;left: 0;"></div>

Answer 15

尝试在每次更改其值时调用此函数。

 textArea.addEventListener('input', function() {
        setDynamicHeight();
 });

 function setDynamicHeight() {
    textArea.style.height = 0; // set the height to 0 in case of it has to be shrinked
    textArea.style.height = textArea.scrollHeight + 'px'; // set the dynamic height
}

Answer 16

let count = 0
const a = document.querySelector('textarea')
for (let i = 0; i < a.value.length; i++) {
  if (a[i] == '\n') {
    count++
  }
}
console.log(count)

如何获得textarea中的行数？

16 个答案: