Compteur de mots & de caractères

Bonjour bonjour

Si tu es ici, c'est probablement parce que tu as un forum RPG, ou, tout simplement, parce que tu aimerais ajouter un compteur de mot sur ton forum.

Nous allons voir ici comment procéder ^^

Pré-requis :
• Avoir accès aux codes javascript du forum ;
• Ce tutoriel peut s'adapter à toutes les versions.

Le tutoriel ne fonctionne pas pour la réponse rapide en version "AwesomeBBB"

Notre but va donc de faire ça :

Comme tu peux le voir, la zone de texte indique Nombre de caractères : 50 ; Nombre de mots : 14. Mais si tu regardes bien l'image, nous avons en réalité bien plus de caractères et de mots ! Ici, nous allons voir comment faire en sorte que les mots de deux lettres ou moins ne soient pas considérer comme "des mots" et que tout ce qui se trouvent entre crochets (pour le BBcode) ou entre "flèches" (pour le html) ne soient pas comptabilisés.

Au boulot !


Pour que notre javascript fonctionne, nous allons devoir l'appeler sur toutes les pages du forum (nous y reviendrons en le mettant en place ^^). Cela dit, il va être inutile de l'exécuter sur la page d'index ou dans les sous-forum, bref, là où il n'y a pas d'éditeur de texte.

On va donc commencer par lancer une fonction javascript une fois la page chargée :

Code:

$( function(){

});

Si tu as déjà fait un peu de javascript, tu as peut-être déjà croisé ceci :

Code:

$(document).ready( function(){
 
});

Eh bien sache que le code fourni juste au-dessus et une version raccourcie du "ready()"

Une fois la page chargée, on regarde s'il y a un éditeur de texte :

Code:

$('#text_editor_textarea').length

S'il n'y en a pas, on ne lit pas la suite du script. Pour cela, on va utiliser "return" qui signifie : tu t'arrêtes là, ne lis pas la suite.

Code:

if(!$('#text_editor_textarea').length){
 return ;
 }

En revanche, s'il y a une zone de saisi de texte, on va continuer à lire. Dans ce cas, on va entrer dans une nouvelle fonction :

Code:

$( function(){
 // si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){

 });

)};

Ici, on va récupérer la zone "éditeur de texte" et on va stocker cette information dans une variable (une variable est une sorte de case mémoire ^^).

Code:

var champs_msg = $('#text_editor_textarea').sceditor('instance');

Et on va tester si cette information existe ou pas. Si elle n'existe pas, inutile de continuer, cela signifie que l'éditeur de texte n'existe pas :

Code:

if(!champs_msg){
 return ;
 }

Lorsque l'on indique ! cela signifie que l'on prend le contraire de l'information. Autrement dit : champs_msg veut dire "la zone existe" et donc !champs_msg veut dire "la zone n'existe pas".

Pour le moment, nous avons donc ce bout de code :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){

 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }
 });

});

Bon ! Continuons un peu notre travail. Pour pouvoir afficher le nombre de caractères et de mots, il va falloir que l'on crée une nouvelle zone. Impossible d'éditer un template pour ça, il va falloir gérer cet affichage et ajout en javascript.

Tout d'abord, on crée une variable qui va contenir une div :

Code:

var champs_infos = document.createElement('div');

On va ajouter à cet élement un id afin de pouvoir le styliser plus tard avec un peu de CSS (cependant, nous n'en parlerons pas dans ce tutoriel) :

Code:

champs_infos.setAttribute('id', 'compteur-mots');

Et finalement, on injecte cette div dans la zone de l'éditeur de texte :

Code:

$(champs_infos).appendTo('.sceditor-container');

Notre code avance, nous en sommes ici :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){

 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }

 // On crée une zone pour afficher le nombre de mots et de caractères
 var champs_infos = document.createElement('div');
 champs_infos.setAttribute('id', 'compteur-mots');
 $(champs_infos).appendTo('.sceditor-container');
 });

});

Ahhh ! Attaquons le point essentiel de notre javascript : la petite fonction qui va compter pour nous ^^ Première étape : déclarer la variable :

Code:

function compteur(champs_msg){

}

Tout d'abord, on va stocker dans une nouvelle variable le contenu de notre champs texte :

Code:

var nb = champs_msg.val() ;

val() permet de récupérer le contenu de l'attribut value d'une balise html.

Problème : si on ne fait que ça, il va également compter les balises bbcode et html. Or, nous ne voulons ni les crochets, ni les "flèches", ni ce qui se trouvent entre les 2. On va donc remplacer ces caractères et contenus par du vide

Code:

var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

replace(/\[.*?\]/g,' ') signifie "on remplace les crochets et ce qu'ils contiennent par du vide"
replace(/<.*?>/g,' ') signifie "on remplace les "flèches" et ce qu'elles contiennent par du vide"

Cette fois, on a donc bien uniquement le texte et pas de BBcode ou HTML.

Ensuite, dans ce champ, on va regarder les caractères et les compter :

Code:

var nb_carac = (nb.match(/\S/g)||[]).length;

la méthode match() nous permet de ne prendre en compte que les caractères (et caractères spéciaux) mais pas les espaces vides ou retour à la ligne

Puis, on va compter le nombre de mots d'au minimum 3 caractères :

Code:

var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

{3, } signifie "élements de 3 caractères au moins".

On a nos deux informations, il ne reste plus qu'à les afficher dans notre champs_infos

Code:

champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

Au final, notre fonction ressemble à ça :

Code:

function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 }

Et on va la placer au début du javascript (après les tests) :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){
 
 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }

 function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 }
 

 // On crée une zone pour afficher le nombre de mots et de caractères
 var champs_infos = document.createElement('div');
 champs_infos.setAttribute('id', 'compteur-mots');
 $(champs_infos).appendTo('.sceditor-container');
 
 });

 });
 
});

On a quasi terminé ; cela dit, tu ne penses pas qu'il manque le plus important : quand compter ? Eh bien, nous allons executer la fonction à chaque fois qu'on a cliqué sur une touche.

Code:

$('body').on('keyup', '.sceditor-container', function(){
 compteur(champs_msg) ;
}

On a donc ce code :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){
 
 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }

 function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 }
 

 // On crée une zone pour afficher le nombre de mots et de caractères
 var champs_infos = document.createElement('div');
 champs_infos.setAttribute('id', 'compteur-mots');
 $(champs_infos).appendTo('.sceditor-container');
 
 // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
 // on fait une fonction.
 $('body').on('keyup', '.sceditor-container', function(){
 compteur(champs_msg) ;
 }

 });

 });
 
});

Pour économiser des ressources, on peut aussi à ajouter un timer et n'exécuter la fonction que toutes les N secondes

Pour cela, il suffit :
- de déclarer une variable "compte" au debut de la fonction et de lui donner la valeur "false"

Code:

var compte = false ;

- de la passer également à "false" une fois qu'on a compté :

Code:

function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 compte = false ;
 }

- de faire un test dès qu'on clique sur une touche du clavier dans la zone de saisie afin de vérifier s'il faut ou non compter :

Code:

$('body').on('keyup', '.sceditor-container', function(){
 if(compte){
 return ;
 }else{
 compte = true ;
 // On compte toutes les 20 secondes
 setTimeout(
 function(){
 compteur(champs_msg)
 }, 2000
 );
 
 }
 });

2000 est le temps en milliseconde entre le moment où l'on clique et le moment où l'on calcule.
et voilà le code final avec le timer :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){
 
 var compte = false ;

 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }

 function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 compte = false ;
 }
 
 // On crée une zone pour afficher le nombre de mots et de caractères
 var champs_infos = document.createElement('div');
 champs_infos.setAttribute('id', 'compteur-mots');
 $(champs_infos).appendTo('.sceditor-container');

 // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
 // on fait une fonction.
 $('body').on('keyup', '.sceditor-container', function(){
 if(compte){
 return ;
 }else{
 compte = true ;
 // On compte toutes les 20 secondes
 setTimeout(
 function(){
 compteur(champs_msg)
 }, 2000
 );
 
 }
 });

 });
 
});

Si on laisse comme ça, notre champs n'apparait pas au chargement de la page. On va donc l'initialiser en lui indiquant :

Code:

champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";

Cependant, si on s'arrête là, même à l'édition d'un message, on va afficher :

Nombre de caractères : 0 ; Nombre de mots : 0

Ce n'est pas ce qu'on veut ^^

On va donc tester si la zone de texte est vide (= cas d'un nouveau message) : dans ce cas, on initialise la div ; sinon, on compte pour mettre à jour les infos :

Ce qui nous donne pour le test :

Code:

// On teste si on édite un message ou si on en écrit un nouveau
 // Si nouveau message : on met les infos à "0"
 if(champs_msg.val() == ""){
 champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";
 }else{
 // Sinon, on compte ^^
 compteur(champs_msg);
 }

Au final, voilà le code de notre javascript :

Code:

$( function(){
 /// si pas de champs texte, on arrête la lecture du script
 if(!$('#text_editor_textarea').length){
 return ;
 }

 // Il y a un champs texte
 $(function(){
 
 var compte = false ;

 var champs_msg = $('#text_editor_textarea').sceditor('instance');

 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
 if(!champs_msg){
 return ;
 }

 function compteur(champs_msg){
 // On ne prend pas en compte les mots entre [] ou <>
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

 // On compte le nombre de caractères, sans les espaces
 var nb_carac = (nb.match(/\S/g)||[]).length;

 // On compte le nombre de mot de 3 lettres ou plus
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

 // On affiche les infos
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

 compte = false ;
 }
 
 // On crée une zone pour afficher le nombre de mots et de caractères
 var champs_infos = document.createElement('div');
 champs_infos.setAttribute('id', 'compteur-mots');
 $(champs_infos).appendTo('.sceditor-container');

 // On teste si on édite un message ou si on en écrit un nouveau
 // Si nouveau message : on met les infos à "0"
 if(champs_msg.val() == ""){
 champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";
 }else{
 // Sinon, on compte ^^
 compteur(champs_msg);
 }
 
 // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
 // on fait une fonction.
 $('body').on('keyup', '.sceditor-container', function(){
 if(compte){
 return ;
 }else{
 compte = true ;
 // On compte toutes les 20 secondes
 setTimeout(
 function(){
 compteur(champs_msg)
 }, 2000
 );
 
 }
 });

 });
 
});

Tout est prêt, il n'y a plus qu'à installer notre compteur ^^

Pour cela, il te suffit d'aller dans : Panneau d'administration > Modules > HTML & javascript > Gestion des codes javascript, de créer un nouveau js et de l'afficher sur toutes les pages.


Et zioup ! Le tour est joué, ton forum possède désormais un compteur de mots qu'il ne te reste plus qu'à styliser dans la CSS

Exemple: