Chciałbym to policzyć liczbę wierszy w textarea, np:Jak uzyskać liczbę linii w obszarze tekstowym?
line 1
line 2
line 3
line 4
powinna liczyć maksymalnie 4 linie. Zasadniczo naciskając Enter by przenieść do następnego wiersza
Poniższy kod nie działa:
var text = $("#myTextArea").val();
var lines = text.split("\r");
var count = lines.length;
console.log(count);
To zawsze daje „1” bez względu na to jak wiele linii.
I wprowadziły linie i metod lineCount jako prototypy wyrażenie:
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Najwyraźniej metoda podziału będzie nie wlicza znaku powrotu karetki i/lub znaku nowego wiersza na końcu ciągu znaków (lub właściwości innerText obszaru tekstowego) w IE9, ale będzie ją liczyć w przeglądarce Chrome 22, uzyskując różne wyniki.
Do tej pory znaleziono miejsce dla tego poprzez odjęcie 1 od liczby linii, gdy przeglądarka jest inna niż Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Mam nadzieję, że ktoś ma lepszy RegExp lub innego obejścia.
A co z podziałem na "\ n"?
Będzie to również problem polegający na tym, że jeden wiersz zostanie zawinięty do 2 linii w obszarze tekstowym.
Aby zrobić to dokładnie tak, można użyć stałej wysokości i zmierzyć piksele. To może być jednak problematyczne.
użytkownik \n zamiast \r
var text = $("#myTextArea").val();
var lines = text.split("\n");
var count = lines.length;
console.log(count);
Jeśli tylko chce przetestować twardych powraca linia, to będzie działać wieloplatformowym:
var text = $("#myTextArea").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
normalny znak nowej linii jest "\ n". Konwencja dotycząca niektórych systemów ma również "\ r" wcześniej, więc w tych systemach "\ r \ n" często oznacza nową linię. W przeglądarce, chyba że użytkownik celowo wprowadzi znak "\ r", kopiując go z innego miejsca, znak nowej linii będzie prawdopodobnie wyrażony jako "\ n". W obu przypadkach podział na "\ n" policzy liczbę linii.
Problem z używaniem "\ n" lub "\ r" polega jedynie na zliczaniu liczby zwrotów, jeśli linia jest długa, którą można zawijać, a następnie nie zostanie zliczona jako nowa linia. Jest to alternatywny sposób na uzyskanie liczby linii - może to nie być najlepszy sposób.
Edit (dzięki alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight')/lht;
console.log(lines);
})
Aktualizacja: Jest znacznie bardziej dokładna odpowiedź tutaj: 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>
Funkcja ta zlicza liczbę wierszy, które mają tekstu w 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;
}
Użyłem oryginalną odpowiedź Mottie ale niektóre funkcje zostały zmienione w API jQuery. Oto działająca funkcja dla aktualnego API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight')/lht;
console.log(lines);
Wszystkie tumb się za odpowiedź Mottie!
Jednak to działa, jeśli chcesz go używać, ponieważ odpowiedzi na swój problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);
Twoje ans można zrobić w bardzo prosty sposób.
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);
Kod dla dokładnych linii wypełnionych w obszarze tekstowym. i będzie działać na pewno.
Po dalszych testach odkryłem, że wszelkie białe spacje po ostatnim znaku nowego wiersza i przed tagiem zamykającym są również liczone jako dodatkowy element w podziale na inne przeglądarki niż IE9. – thor2k
ten post jest trochę stary, ale tylko dla informacji, myślę, że znalazłem obejście: użycie elementu 'contenteditable' zamiast textarea: [http://stackoverflow.com/a/22732344/2037924](http : //stackoverflow.com/a/22732344/2037924) ... – webeno
Działa po naciśnięciu klawisza Enter, ale nie działa w przypadku długiego tekstu pojawiającego się w kilku wierszach. – RaV