Maison > Tutoriel CMS > WordPresse > le corps du texte

Nombre de mots JavaScript : un guide étape par étape

WBOY
Libérer: 2023-09-02 23:17:10
original
1370 Les gens l'ont consulté

JavaScript 字数统计:分步指南

Dans ce court article, nous apprendrons à compter le nombre de mots dans un paragraphe en utilisant JavaScript, ainsi que quelques exemples pratiques.

En tant que développeur JavaScript, vous devez parfois restreindre la saisie de l'utilisateur dans une zone de texte. Il existe deux manières de limiter la saisie de l'utilisateur : par le nombre de caractères ou par le nombre de mots. Aujourd'hui, nous parlerons de ce dernier : comment compter le nombre de mots dans une chaîne en JavaScript.

Exemple JavaScript : comptez le nombre de mots dans une chaîne

Dans cette section, nous allons créer une fonction JavaScript personnalisée qui vous permet de compter tous les mots d'une chaîne.

Jetons un coup d’œil rapide aux exemples suivants.

Comme vous pouvez le voir, nous avons créé une getWordCount fonction JavaScript qui prend un argument de chaîne et donne le nombre total de tous les mots dans la chaîne donnée.

Comprenons comment cela fonctionne. Tout d'abord, nous utilisons la méthode de chaîne JavaScript split pour diviser la chaîne en caractères espace et, par conséquent, nous obtenons un tableau de chaînes.

Ensuite, nous utilisons filter Méthodes de tableau JavaScript pour filtrer les chaînes vides - celles-ci apparaissent lorsqu'une chaîne comporte deux espaces d'affilée.

Enfin, nous avons un tableau de mots (et autres signes de ponctuation) et nous pouvons utiliser la propriété array length pour compter le nombre d'éléments dans le tableau. Cela nous donne le nombre total de mots dans la chaîne donnée !

Exemple JavaScript : comptez le nombre de mots dans une chaîne à l'aide d'expressions régulières

Dans la section précédente, nous avons discuté d'un exemple JavaScript pour montrer comment compter tous les mots d'une chaîne. Nous faisons cela en nous divisant en caractères spatiaux. Cependant, nous devons filtrer les chaînes vides qui peuvent apparaître lorsque la chaîne source comporte plusieurs espaces d'affilée.

Dans cette section, nous modifierons l'exemple ci-dessus à l'aide d'expressions régulières. Jetons un coup d'œil rapide à l'exemple ci-dessous.

Cette fois, nous utilisons l'expression régulière /s+/ pour diviser la chaîne, représentant un ou plusieurs caractères d'espacement. De cette façon, nous pouvons obtenir directement les résultats souhaités sans filtrer la chaîne vide. De plus, le modèle s correspond aux nouvelles lignes et aux tabulations, ce qui rend les résultats plus robustes que la correspondance directe avec les caractères d'espacement. Comme vous pouvez le voir, compter le nombre de mots dans une chaîne est encore plus simple avec l'aide des /s+/ 正则表达式分割字符串,表示一个或多个空白字符。这样,我们就可以直接得到我们想要的结果,而不需要过滤空字符串。此外, s 模式匹配新行和制表符,使得结果比直接匹配空格字符更加稳健。正如你所看到的,借助 split méthodes de chaîne JavaScript !

Exemples du monde réel

Dans cette section, nous verrons un exemple pratique pour démontrer l'utilisation de la fonction getWordCount que nous avons construite dans les sections précédentes.

Jetons un coup d'œil à l'exemple suivant qui affiche un compteur de mots en temps réel lorsque l'utilisateur tape dans une zone de texte.

Ainsi, comme vous pouvez le voir, lorsque l'utilisateur tape dans la zone de texte, il affiche un compteur en direct ! Vous pouvez utiliser et étendre cet exemple pour afficher un message à l'utilisateur lorsque vous souhaitez limiter le texte saisi.

Conclusion

Aujourd'hui, nous avons expliqué comment compter les mots en JavaScript avec quelques exemples.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal