Что я хотел бы, чтобы подсчитать количество строк в текстовом поле, например:Как получить количество строк в текстовом поле?
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», независимо от того, сколько строк.
Я реализовал линии и методы LineCount как Струнные прототипы:
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
По-видимому, метод разделения не считать символ возврата каретки и/или символ новой строки в конце строки (или свойство innerText для текстовой области) в IE9, но он будет считать ее в Chrome 22, что даст разные результаты.
До сих пор я размещены для этого путем вычитания 1 из подсчета линии, когда браузер, кроме Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Надеюсь, кто-то лучше RegExp или другой обходной путь.
Как насчет разделения на "\ n" вместо этого?
Это также проблема, когда одна строка завернута в 2 строки в текстовом поле.
Чтобы сделать это точно, вы можете использовать фиксированный шрифт высоты и измерять пиксели. Однако это может быть проблематично.
пользователя \n вместо \r
var text = $("#myTextArea").val();
var lines = text.split("\n");
var count = lines.length;
console.log(count);
Если вы просто хотите проверить возвращения жесткой линии, это будет работать кросс-платформенный:
var text = $("#myTextArea").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
нормальный символ новой строки «\ п». Соглашение о некоторых системах также должно иметь «\ r» заранее, поэтому в этих системах «\ r \ n» часто встречается как новая строка. В браузере, если пользователь не намеренно вводит «\ r», копируя его из другого места, новая строка, вероятно, будет выражаться как «\ n». В любом случае расщепление на «\ n» будет подсчитывать количество строк.
Проблема с использованием «\ n» или «\ r» заключается в том, что она подсчитывает количество возвратов, если у вас есть длинная строка, которую она может обернуть, а затем она не будет считаться новой строкой. Это альтернативный способ получить количество строк - так что это может быть не самый лучший способ.
Edit (спасибо Alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight')/lht;
console.log(lines);
})
Update: Существует гораздо более тщательный ответ здесь: https://stackoverflow.com/a/1761203/145346
<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>
Эта функция подсчитывает количество строк, которые имеют текст в текстовое поле:
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;
}
я использовал оригинальный ответ Mottie но некоторые функции были изменены в API JQuery. Здесь работает функция для текущего API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight')/lht;
console.log(lines);
Все tumbs вверх для ответа Mottie в!
Однако это работает, если вам нужно использовать его, потому что он ответит на вашу проблему
let text = document.getElementById("myTextarea").value;
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);
Ваш анс может быть сделано в очень простым способом.
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);
Этот код для точных линий, заполненных в текстовое поле. и будет работать точно.
После дальнейшего тестирования я обнаружил, что любые пробелы после последнего символа новой строки и перед закрывающим тегом также учитываются как дополнительный элемент в разделе - в отличие от браузеров IE9. – thor2k
этот пост немного старый, но для информации, я думаю, что нашел обходное решение: использование элемента contenteditable вместо текстового поля: [http://stackoverflow.com/a/22732344/2037924](http : //stackoverflow.com/a/22732344/2037924) ... – webeno
Он работает, когда я нажимаю enter, но он не работает для длинного текста, появляющегося в нескольких строках. – RaV