web-dev-qa-db-fra.com

Comment détecter les sauts de ligne dans une entrée de zone de texte?

Quelle est la meilleure façon de vérifier la valeur de la zone de texte pour les sauts de ligne, puis de calculer le nombre d'occurrences, le cas échéant?

J'ai une zone de texte sur un formulaire sur ma page Web. J'utilise JavaScript pour saisir la valeur de la zone de texte, puis je vérifie sa longueur.

Exemple

enteredText = textareaVariableName.val();
characterCount = enteredText.length; // One line break entered returns 1

Si un utilisateur saisit un saut de ligne dans la zone de texte, mon calcul ci-dessus donne au saut de ligne une longueur de 1. Cependant, je dois donner aux sauts de ligne une longueur de 2. Par conséquent, je dois vérifier les sauts de ligne et le nombre d'occurrences, puis ajoutez ceci sur la longueur totale.

Exemple de ce que je veux réaliser

enteredText = textareaVariableName.val();
characterCount = enteredText.length + numberOfLineBreaks;

Ma solution avant de poser cette question était la suivante:

enteredText = textareaVariableName.val();
enteredTextEncoded = escape(enteredText);
linebreaks = enteredTextEncoded.match(/%0A/g);
(linebreaks != null) ? numberOfLineBreaks = linebreaks.length : numberOfLineBreaks = 0;

Je pouvais voir que l'encodage du texte et la vérification de %0A était un peu long, donc je cherchais de meilleures solutions. Merci pour toutes les suggestions.

javascriptjqueryspecial-charactersline-breaks
42
Dave Haigh

Vous pouvez utiliser match sur la chaîne contenant les sauts de ligne, et le nombre d'éléments dans ce tableau doit correspondre au nombre de sauts de ligne.

enteredText = textareaVariableName.val();
numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
characterCount = enteredText.length + numberOfLineBreaks;

/\n/g est une expression régulière qui signifie "recherchez le caractère \n (saut de ligne), et faites-le globalement (sur toute la chaîne).

Le ||[] est juste au cas où il n'y aurait pas de sauts de ligne. Match renverra null, nous testons donc la longueur d'un tableau vide à la place pour éviter les erreurs.

66
beeglebug

Je le ferais en utilisant une expression régulière:

var inTxt = document.getElementById('txtAreaId').value;
var charCount = inTxt.length + inTxt.match(/\n/gm).length;

où /\n/ correspond aux sauts de ligne (évidemment), g est le drapeau global. m signifie multi-ligne, dont vous avez évidemment besoin dans ce cas ...
Alternativement, bien que je me souvienne que c'est un peu plus lent:

var charCount = inTxt.length + (inTxt.split("\n").length);

Edit Je viens de réaliser que si aucun saut de ligne ne correspond, cela crachera une erreur, alors mieux vaut:

charCount = intTxt.length + (inTxt.match(/\n/) !== null ? inTxt.match(/\n/gm).length : 0);

Ou quelque chose de similaire ...

4
Elias Van Ootegem

Voici une façon:

var count = text.length + text.replace(/[^\n]/g, '').length;

Alternativement, vous pouvez remplacer tous les "nus" \n caractères avec \r\n puis utilisez la longueur totale.

3
Pointy

Pour les nouveaux JS, utilisez encodeURI(), car escape() est déconseillé dans ECMAScript 1.5.

Utilisez plutôt:
enteredText = textareaVariableName.val(); enteredTextEncoded = encodeURI(enteredText); linebreaks = enteredTextEncoded.match(/%0A/g); (linebreaks != null) ? numberOfLineBreaks = linebreaks.length : numberOfLineBreaks = 0;

2
Peter