web-dev-qa-db-fra.com

Comment obtenir le nombre de lignes dans une textarea?

Ce que je voudrais, c'est compter le nombre de lignes dans une zone de texte, par exemple:

line 1
line 2
line 3
line 4

devrait compter jusqu'à 4 lignes. En appuyant simplement sur Entrée une fois, vous serez transféré à la ligne suivante.

Le code suivant ne fonctionne pas:

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

Il donne toujours '1' peu importe le nombre de lignes.

javascriptjquery
27
Click Upvote

J'ai implémenté les méthodes lines et lineCount en tant que prototypes String:

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

Apparemment, la méthode de scission ne compte pas un retour à la ligne et/ou un caractère de nouvelle ligne à la fin de la chaîne (ou la propriété innerText d'un textarea) dans IE9, mais elle le comptera dans Chrome 22, produisant des résultats différents.

Jusqu'à présent, je me suis arrangé pour cela en soustrayant 1 du nombre de lignes lorsque le navigateur est autre qu'Internet Explorer:

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

Espérons que quelqu'un a un meilleur RegExp ou une autre solution de contournement.

18
thor2k

Le problème avec "\ n" ou "\ r" est que cela ne compte que le nombre de retours. Si vous avez une ligne longue, elle pourrait être renvoyée à la ligne et ne serait pas comptée comme une nouvelle ligne. C'est un moyen alternatif d'obtenir le nombre de lignes. Ce n'est donc peut-être pas le meilleur moyen.

Edit (merci alex): 

Scénario

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

Mise à jour: Il existe une réponse beaucoup plus détaillée ici: https://stackoverflow.com/a/1761203/145346

43
Mottie

Si vous souhaitez simplement tester les retours ligne dure, cela fonctionnera sur plusieurs plateformes:

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

utilisateur \n au lieu de \r

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

Cette fonction compte le nombre de lignes contenant du texte dans une zone de texte:

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;
}
2
Tran Duy

Pourquoi ne pas scinder sur "\ n"?

Ce sera également un problème lorsqu'une ligne sera renvoyée à 2 lignes dans la zone de texte.

Pour le faire avec précision, vous pouvez utiliser une police à hauteur fixe et mesurer les pixels. Cela pourrait être problématique cependant.

2
alex

J'ai utilisé la réponse originale de Mottie mais certaines fonctions ont été modifiées dans l'API JQuery. Voici la fonction de travail pour l’API actuelle v3.1.0:

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

Tout ça pour la réponse de Mottie!

1
Quispie

Le caractère de nouvelle ligne normal est "\ n". La convention sur certains systèmes est d’avoir aussi "\ r" à l’avance, de sorte que sur ces systèmes "\ r\n" signifie souvent une nouvelle ligne. Dans un navigateur, à moins que l'utilisateur n'entre intentionnellement un "\ r" en le copiant ailleurs, la nouvelle ligne sera probablement exprimée sous la forme "juste"\n ". Dans les deux cas, la division par "\ n" comptera le nombre de lignes.

1
Danny Roberts

Cependant, cela fonctionne si vous avez besoin de l'utiliser car il répond à votre problème

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

Votre réponse peut être faite de manière très simple .

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

Ce code pour les lignes exactes remplies dans la zone de texte . Et fonctionnera à coup sûr.

0
Bachas
<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>
0
humo