Count Words and Characters in JavaScript (2023)

Compter les mots et les caractères en JavaScript (2023)

13 erreurs WordPress courantes [et comment les corriger] Vous lisez Compter les mots et les caractères en JavaScript (2023) 4 minutes Suivant 30 conseils pour booster vos compétences en développement Web

Par Bofu Agence Marketing19 mars 20220 commentaire

Compter les caractères :

Dans la fonction countCharacters :

Vérifiez d’abord si la valeur transmise est une chaîne ou non.
Si ce n'est pas une chaîne, false reviendra sinon passera à l'expression suivante.
trim est une méthode de chaîne qui supprime les espaces blancs du début et de la fin.
length renverra le nombre de caractères ainsi que les espaces dans une chaîne.

Compter les caractères en javascript

Remarque : Les espaces blancs sont également considérés comme un caractère dans les applications du monde réel.

Voici un exemple de l'application Word Counter .

Nombre de mots javascript

Compter les mots :

Étapes impliquées dans countWords :

Vérifiez d’abord si la valeur transmise est une chaîne ou non.
Si ce n'est pas une chaîne, false reviendra sinon passera à l'expression suivante.
trim est une méthode de chaîne qui supprime les espaces blancs du début et de la fin.
split renvoie un tableau de sous-chaînes séparées par un motif.
\s+ est une expression régulière.
\s correspond à n'importe quel caractère d'espacement (espaces, tabulations ou sauts de ligne)
"+" est un quantificateur (fait correspondre une ou plusieurs valeurs ou jetons précédents - Dans notre cas, il s'agit d'un espace \s )
le filtre est une méthode de tableau qui filtre le tableau en fonction de la condition.
Nous ne voulons pas de chaînes vides à l’intérieur du tableau, c’est pourquoi nous avons utilisé un filtre.
length renverra le nombre de valeurs (mots) à l’intérieur d’un tableau

Compter les mots en javascript

Astuce : Vous pouvez tester la même expression régulière sur regexr . C'est un site Web assez solide pour apprendre et tester les expressions régulières à la volée.

Maintenant, nous avons les fonctions prêtes. Affichons.

Afficher le nombre total de mots et de caractères :

Étapes impliquées dans l’affichage du nombre de mots et de caractères :

Mettez un écouteur d'événement d' entrée sur la métaDescription (champ textarea).
l'événement d'entrée détectera tout changement à l'intérieur du champ (textarea)
Obtenez les mots à compter avec la fonction de comptage de mots en transmettant la valeur de méta-description.
Même appel pour compter les caractères
Ensuite, affichez dans les zones spécifiques en utilisant innerHTML ou textContent.

Événement javascript d'entrée

Hourra! Vous avez terminé votre comptage des mots et des caractères en javascript.

Voici maintenant les étapes que vous pouvez effectuer (facultatif) :

Rendez-le beau en utilisant du CSS personnalisé ou n'importe quel framework CSS frontal
Si vous connaissez ReactJS, essayez de l'implémenter dans ReactJS.
Déployez-le quelque part sur Vercel, les pages Github, etc. Ainsi, les gens peuvent le voir et l'utiliser.
N'oubliez pas de partager ce guide sur Twitter ou LinkedIn.
Enfin, vous pouvez vous inscrire à la newsletter .