Как получить количество строк в текстовом поле?

Я хотел бы подсчитать количество строк в текстовом поле, например:

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" независимо от того, сколько строк.

Ответы

Ответ 1

Я реализовал линии и методы lineCount в качестве прототипов String:

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

По-видимому, метод split не будет считать символ возврата каретки и/или символа новой строки в конце строки (или свойство innerText текстового поля) в IE9, но он будет считать это в Chrome 22, что даст разные результаты.

До сих пор я устраивал это, вычитая 1 из подсчета строк, когда браузер отличается от Internet Explorer:

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

Надеюсь, у кого-то есть лучший RegExp или другой обходной путь.

Ответ 2

Проблема с использованием "\n" или "\ r" заключается в том, что она подсчитывает количество возвратов, если у вас есть длинная строка, которую она может обернуть, а затем она не будет считаться новой строкой. Это альтернативный способ получить количество строк - так что это может быть не лучший способ.

Изменить (спасибо alex):

Script

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

Обновление: здесь гораздо более тщательный ответ: fooobar.com/questions/51507/...

Ответ 3

Если вы просто хотите проверить результаты жесткой линии, это будет работать с кросс-платформой:

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

Ответ 4

пользователь \n вместо \r

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

Ответ 5

Как насчет разделения на "\n" вместо?

Это также будет проблема, когда одна строка завернута в 2 строки в текстовом поле.

Чтобы сделать это точно, вы можете использовать фиксированный шрифт высоты и измерять пиксели. Однако это может быть проблематично.

Ответ 6

Эта функция подсчитывает количество строк, которые имеют текст в текстовом поле:

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

Ответ 7

Нормальным символом новой строки является "\n" . Соглашение о некоторых системах также должно иметь "\ r" заранее, поэтому в этих системах "\ r\n" часто встречается как новая строка. В браузере, если пользователь не намеренно вводит "\ r", копируя его из другого места, новая строка, вероятно, будет выражаться как "\n" . В любом случае расщепление на "\n" будет подсчитывать количество строк.

Ответ 8

Я использовал оригинальный ответ Mottie, но некоторые функции были изменены в JQuery API. Вот рабочая функция для текущего API v3.1.0:

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

Все отскакивают от ответа Мотти!

Ответ 9

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

Ответ 10

Однако это работает, если вам нужно использовать его, потому что он отвечает на вашу проблему.

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

Ответ 11

Ваши анны могут быть выполнены очень простым способом.

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

Этот код для точных строк, заполненных текстовым полем. и будет работать точно.