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

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

line 1
line 2
line 3
line 4

следует считать до 4 строк. В основном, нажав Enter один раз, вы переместитесь на следующую строку.

Следующий код не работает:

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

Он всегда дает "1" независимо от того, сколько строк.

Источник

16 ответов

Решение

Я реализовал линии и методы 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 или другой обходной путь.

Источник

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

Редактировать (спасибо, Алекс):

скрипт

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

Обновление: здесь можно найти более подробный ответ: /questions/44198608/kak-poluchit-kolichestvo-strok-v-textarea-ispolzuya-javascript/44198631#44198631

Источник

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

var text = $("#myTextArea").val();   
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
Источник

Пользователь \n вместо \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 вместо этого?

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

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

Источник

Подсчет новых строк не является надежным способом определения количества строк, поскольку длинный текст может просто разорваться и по-прежнему считаться только одной строкой. Что вы хотите сделать, так это узнать scrollHeight текстового поля и разделить его на высоту одной строки.

Подробный ответ здесь: /questions/44198608/kak-poluchit-kolichestvo-strok-v-textarea-ispolzuya-javascript/44198631#44198631

Источник

Я использовал оригинальный ответ 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));
Источник

Попробуйте вызывать эту функцию каждый раз, когда вы меняете ее значение.

 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
}
Источник

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

Источник 
<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>
Источник

Вместо textarea вы можете использовать div с атрибутом contenteditable="true". В div с этим атрибутом вы можете писать что угодно, как и в текстовом поле, но любая новая строка (кроме первой) автоматически переносится внутрь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>

Источник 
      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)
Источник

Ваш ответ может быть сделан очень простым способом.

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

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

Источник
Другие вопросы по тегам