Wie bekomme ich die Anzahl der Zeilen in einem Textfeld?

Was Ich mag würde, ist die Anzahl der Zeilen in einem Textfeld zu zählen, z:Wie bekomme ich die Anzahl der Zeilen in einem Textfeld?

line 1 
line 2 
line 3 
line 4

soll zu 4 Zeilen zählen. Grundsätzlich drücken einmal eingeben würden Sie in die nächste Zeile übertragen

Der folgende Code funktioniert nicht:

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

Es ist immer ‚1‘ gibt, egal wie viele Linien.

Quelle

2010-01-10 Click Upvote

ich die Linien und linecount Methoden wie String-Prototypen umgesetzt haben:

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

Anscheinend wird die Split-Methode Zählen Sie am Ende der Zeichenfolge (oder der innerText -Eigenschaft eines Textfelds) in IE9 keinen Wagenrücklauf und/oder ein Zeilenvorschubzeichen, aber es wird in Chrome 22 gezählt, was zu anderen Ergebnissen führt.

Bisher habe ich für diese gebracht von 1 von der Zeilenzahl abgezogen, wenn der Browser eine andere als Internet Explorer:

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

Hoffentlich hat jemand eine bessere RegExp oder eine andere Abhilfe.

Quelle

2012-10-17 05:08:30 thor2k

Nach weiteren Tests stellte ich fest, dass alle Leerzeichen nach dem letzten Zeilenumbruchzeichen und vor dem schließenden Tag auch als zusätzliches Element in den split-in anderen IE9-Browsern gezählt werden. – thor2k

dieser Beitrag ist ein wenig alt, aber nur für Informationen, ich glaube, ich fand eine Abhilfe: die Verwendung eines 'contenteditable' Elements anstelle eines Textfelds: [http://stackoverflow.com/a/22732344/2037924](http : //stackoverflow.com/a/22732344/2037924) ... – webeno

Es funktioniert, wenn ich Enter drücke, aber es funktioniert nicht für langen Text, der in einigen Zeilen erscheint. – RaV

Wie sieht es mit dem Aufteilen auf "\ n" aus?

Es wird auch ein Problem sein, wo eine Zeile um 2 Zeilen in der Textarea gewickelt wird.

Um genau dies zu tun, könnten Sie eine Schriftart mit fester Höhe verwenden und Pixel messen. Dies könnte jedoch problematisch sein.

Quelle

2010-01-10 02:54:49 alex

autsch ...................! – alex

Es ist nicht so schlimm ... Ich habe diese Methode in meiner Antwort verwendet. – Mottie

Benutzer \n statt \r

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

Quelle

2010-01-10 02:56:44

Wenn Sie nur wollen, sind harte Linie kehrt zu testen, wird diese Cross-Plattform arbeiten:

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

Quelle

2010-01-10 02:58:15

Das normale Newline-Zeichen ist "\ n". Die Konvention auf einigen Systemen soll auch "\ r" haben, so dass "\ r \ n" auf diesen Systemen oft eine neue Zeile bedeutet. In einem Browser wird der Zeilenumbruch wahrscheinlich nur als "\ n" ausgedrückt, es sei denn, der Benutzer gibt absichtlich ein "\ r" ein, indem er es von woanders kopiert. In beiden Fällen zählt die Teilung durch "\ n" die Anzahl der Zeilen.

Quelle

2010-01-10 02:58:43

Das Problem bei der Verwendung von "\ n" oder "\ r" ist, zählt nur die Anzahl der Rückgaben, wenn Sie eine lange Linie haben, könnte es umbrechen und dann würde es nicht als neue Zeile gezählt werden. Dies ist ein alternativer Weg, um die Anzahl der Zeilen zu erhalten - so ist es möglicherweise nicht der beste Weg.

Edit (dank alex):

Script

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

Update: Es gibt eine viel gründlichere Antwort hier: https://stackoverflow.com/a/1761203/145346

Quelle

2010-01-10 07:32:44 Mottie

Sie können die Wartung mit 'var laheight = $ ('textarea # my-textarea') verringern css ('line-height'); – alex

Das scheint nicht die richtige Zeilenhöhe zurückzugeben, Sie müssen es einstellen. – Mottie

Es wird nur in Pixel zurückgegeben, glaube ich. – alex

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

Quelle

2014-05-03 18:00:22 humo

Diese Funktion zählt die Anzahl der Zeilen, den Text in einem Textfeld hat:

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

Quelle

2015-03-11 10:55:11

ich die ursprüngliche Antwort von Mottie verwendet habe, aber einige Funktionen wurden in der JQuery API geändert. Hier ist die Arbeitsfunktion für die aktuelle API v3.1.0:

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

Alle tumbs up für Mottie Antwort!

Quelle

2016-08-11 13:26:57 Quispie

Allerdings arbeiten diese, wenn Sie sie brauchen zu verwenden, weil es

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

Quelle

2017-05-15 13:14:00

Sie am, um Ihr Problem reagieren kann auf sehr einfache Art und Weise durchgeführt werden.

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

Dieser Code in das Textfeld gefüllt exakte Linien. und wird sicher funktionieren.

Quelle

2017-09-21 06:08:00 Bachas

Wie bekomme ich die Anzahl der Zeilen in einem Textfeld?

Antwort

Verwandte Themen