Comment afficher le nombre de mots et de caractères d'un textarea ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-09-22 14:01:28

Question

Comment faire pour afficher le nombre de mots et de caractères d'un <textarea> ?

Réponse

Pour compter et afficher le nombre de caractères et de mots d'un <textarea>, vous pouvez créer un fonction JavaScript.

Pour compter le nombre de caractères, on utilise la fonction lenght ; et pour compter le nombre de mots on utilise les fonctions trim et split

Voici comment compter et afficher le nombre de mots et de caractères d'un textarea :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment compter le nombre de mots et de caractères d'un textarea ?</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br>
<span id="mots">0</span> mots et <span id="caracteres">0</span> Caractères
<script>
let textarea = document.getElementById('textarea');
let caracteres = document.getElementById('caracteres');
let mots = document.getElementById('mots');

textarea.addEventListener('input', function () {
  let contenu = this.value;
  caracteres.textContent = contenu.length;
  contenu.trim();
  let wordList = contenu.split(/\s/);

  let nbr_mots = wordList.filter(function (element) {
    return element != "";
  });
  
  mots.textContent = nbr_mots.length;
});
</script>
</body>
</html>