[AWESOMEBB] Compteur de caractères (suite)

Hello Mathis,

Tu m'avais alors dit que ce n'était pas possible de compter le nombre de caractère en mode wysiwyg.

Et je confirme ainsi que sur le forum concerné:

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 ;
     }


Ce script doit fonctionner, mais il suffit de mettre des smileys en mode wysiwyg pour s'apercevoir du bug lors du comptage.
C'est juste pour te faire voir que ce mode n'est pas réellement compté, vu qu'il ne peut pas compter réellement le smileys affiché.

Code:

$(function(){
    if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
      var smil=$('#text_editor_textarea').length;
      if(smil)
      {
    $(function(){
    $('.sceditor-container').after('<div id="M14_Decompte"><span class="M14_Decompte">60000</span> <b>caractère(s) restant(s)</b></div>');
    var texta=$('#text_editor_textarea').sceditor('instance');
    if(!texta) return;  
    var raf= function(){var decompte=1000;var num=texta.val().length;var result=decompte-num;$('.M14_Decompte').text(result);
    };texta.keyUp(function(){setTimeout(function(){ raf() }, 1000)});raf()})
      }
      });

Hey Phil ^^

Merci pour ta réponse 

Mais mes membres n'utilisent jamais les smileys lors du partage de leurs écrits ^^
S'ils me demandent pourquoi le chiffre est faussé, je leur expliquerait, même si je ne pense pas qu'ils y feront attention dans les autres catégories non destinées aux partages de textes.
Mais je trouve que ça donne quand même un belle idée sur le nombre de mots et de caractères sans être faussé par la mise en page (qui est fort utilisée par contre).

Pourrais-je avoir la version du script fonctionnelle en direct (toutes les 2 secondes) ?

Code:

$( function(){[size=14][/size]
 /// si pas de champs texte, on arrête la lecture du script[size=14][/size]
 if(!$('#text_editor_textarea').length){[size=14][/size]
 return ;[size=14][/size]
 }[size=14][/size]
[size=14][/size]
 // Il y a un champs texte[size=14][/size]
 $(function(){[size=14][/size]
 [size=14][/size]
 var compte = false ;[size=14][/size]
[size=14][/size]
 var champs_msg = $('#text_editor_textarea').sceditor('instance');[size=14][/size]
[size=14][/size]
 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script[size=14][/size]
 if(!champs_msg){[size=14][/size]
 return ;[size=14][/size]
 }[size=14][/size]
[size=14][/size]
 function compteur(champs_msg){[size=14][/size]
 // On ne prend pas en compte les mots entre [] ou <>[size=14][/size]
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');[size=14][/size]
[size=14][/size]
 // On compte le nombre de caractères, sans les espaces[size=14][/size]
 var nb_carac = (nb.match(/\S/g)||[]).length;[size=14][/size]
[size=14][/size]
 // On compte le nombre de mot de 3 lettres ou plus[size=14][/size]
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;[size=14][/size]
[size=14][/size]
 // On affiche les infos[size=14][/size]
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";[size=14][/size]
[size=14][/size]
 compte = false ;[size=14][/size]
 }[size=14][/size]
 [size=14][/size]
 // On crée une zone pour afficher le nombre de mots et de caractères[size=14][/size]
 var champs_infos = document.createElement('div');[size=14][/size]
 champs_infos.setAttribute('id', 'compteur-mots');[size=14][/size]
 $(champs_infos).appendTo('.sceditor-container');[size=14][/size]
[size=14][/size]
 // On teste si on édite un message ou si on en écrit un nouveau[size=14][/size]
 // Si nouveau message : on met les infos à "0"[size=14][/size]
 if(champs_msg.val() == ""){[size=14][/size]
 champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";[size=14][/size]
 }else{[size=14][/size]
 // Sinon, on compte ^^[size=14][/size]
 compteur(champs_msg);[size=14][/size]
 }[size=14][/size]
 [size=14][/size]
 // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,[size=14][/size]
 // on fait une fonction.[size=14][/size]
 $('body').on('keyup', '.sceditor-container', function(){[size=14][/size]
 if(compte){[size=14][/size]
 return ;[size=14][/size]
 }else{[size=14][/size]
 compte = true ;[size=14][/size]
 // On compte toutes les 20 secondes[size=14][/size]
 setTimeout([size=14][/size]
 function(){[size=14][/size]
 compteur(champs_msg)[size=14][/size]
 }, 2000[size=14][/size]
 );[size=14][/size]
 [size=14][/size]
 }[size=14][/size]
 });[size=14][/size]
[size=14][/size]
 });[size=14][/size]
 [size=14][/size]
});

Le script que tu me fournit ne fonctionne pas (en plus , je ne sais pas ce que tu me donnes mais c'est un tas de bbcode.....) sur mon fofo dans le mode concerné:
Par contre celui-ci avec une tempo de 2 secondes est fonctionnel:

Code:

 
$(function(){
    if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
      var smil=$('#text_editor_textarea').length;
      if(smil)
      {
    $(function(){
    $('.sceditor-container').after('<div id="M14_Decompte"><span class="M14_Decompte"></span> <b>caractère(s)</b></div>');
    var texta=$('#text_editor_textarea').sceditor('instance');
    if(!texta) return; 
    var raf= function(){
      var decompte=1000;
      var num=texta.val().length;
 
      $('.M14_Decompte').text(num);
    };texta.keyUp(function(){setTimeout(function(){ raf() }, 2000)});raf()})
      }
      });


Milouze14 a écrit:
Le script que tu me fournit ne fonctionne pas  (en plus , je ne sais pas ce que tu me donnes mais c'est un tas de bbcode.....)

Oups... J'ai donné le mauvais code ^^

Code:

$( function(){[size=14][/size]
 /// si pas de champs texte, on arrête la lecture du script[size=14][/size]
 if(!$('#text_editor_textarea').length){[size=14][/size]
 return ;[size=14][/size]
 }[size=14][/size]
[size=14][/size]
 // Il y a un champs texte[size=14][/size]
 $(function(){[size=14][/size]
 [size=14][/size]
 var compte = false ;[size=14][/size]
[size=14][/size]
 var champs_msg = $('#text_editor_textarea').sceditor('instance');[size=14][/size]
[size=14][/size]
 // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script[size=14][/size]
 if(!champs_msg){[size=14][/size]
 return ;[size=14][/size]
 }[size=14][/size]
[size=14][/size]
 function compteur(champs_msg){[size=14][/size]
 // On ne prend pas en compte les mots entre [] ou <>[size=14][/size]
 var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');[size=14][/size]
[size=14][/size]
 // On compte le nombre de caractères, sans les espaces[size=14][/size]
 var nb_carac = (nb.match(/\S/g)||[]).length;[size=14][/size]
[size=14][/size]
 // On compte le nombre de mot de 3 lettres ou plus[size=14][/size]
 var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;[size=14][/size]
[size=14][/size]
 // On affiche les infos[size=14][/size]
 champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";[size=14][/size]
[size=14][/size]
 compte = false ;[size=14][/size]
 }[size=14][/size]
 [size=14][/size]
 // On crée une zone pour afficher le nombre de mots et de caractères[size=14][/size]
 var champs_infos = document.createElement('div');[size=14][/size]
 champs_infos.setAttribute('id', 'compteur-mots');[size=14][/size]
 $(champs_infos).appendTo('.sceditor-container');[size=14][/size]
[size=14][/size]
 // On teste si on édite un message ou si on en écrit un nouveau[size=14][/size]
 // Si nouveau message : on met les infos à "0"[size=14][/size]
 if(champs_msg.val() == ""){[size=14][/size]
 champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";[size=14][/size]
 }else{[size=14][/size]
 // Sinon, on compte ^^[size=14][/size]
 compteur(champs_msg);[size=14][/size]
 }[size=14][/size]
 [size=14][/size]
 // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,[size=14][/size]
 // on fait une fonction.[size=14][/size]
 $('body').on('keyup', '.sceditor-container', function(){[size=14][/size]
 if(compte){[size=14][/size]
 return ;[size=14][/size]
 }else{[size=14][/size]
 compte = true ;[size=14][/size]
 // On compte toutes les 20 secondes[size=14][/size]
 setTimeout([size=14][/size]
 function(){[size=14][/size]
 compteur(champs_msg)[size=14][/size]
 }, 2000[size=14][/size]
 );[size=14][/size]
 [size=14][/size]
 }[size=14][/size]
 });[size=14][/size]
[size=14][/size]
 });[size=14][/size]
 [size=14][/size]
});

Voilà le code qui ne prend pas en compte le BBCODE ;)
C'est celui-ci que je voudrais adapter pour qu'il fonctionne sur tous les éditeurs avec un rafraîchissement toutes les 2 secondes.
Le script que tu me fournis prend en compte le BBCODE, ce que je ne veux plus ;)

Hello Mathis,

Le script que tu me fournis prend en compte le BBCODE, ce que je ne veux plus ;)

Pour le JS, je pense que c'est celui du fofo concerné car tu as encore déposé la même chose,
je ne sais pas comment tu arrives a choper des balises bbcode!!

Bref, ce script fonctionne chez toi en mode Wysiwyg car sur mon fofo , c'est négatif.
Ensuite, il est déjà sur 2 secondes, le commentaire est erroné.
Je viens de le modifier:

Code:

 // On compte toutes les seconde

on passe la valeur 2000 à 1000 .
Si c'est encore trop long, tu peux passer à une demie seconde:
500

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 2 secondes
 setTimeout(
 function(){
 compteur(champs_msg)
 }, 1000
 );
 
 }
 });

 });
 
});

J'ai revu le mien afin de ne pas prendre en compte les smileys en mode html, balise bbcode:
Il est fonctionnel sur les deux modes.

Code:

$(function(){
    if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
      var smil=$('#text_editor_textarea').length;
      if(smil)
      {
    $(function(){
      $('.sceditor-container').after('<div id="M14_Decompte">Nombre de mot(s):  <span class="one"></span>  Nombre de caractère(s):  <span class="two"></span></div>');
    var texta=$('#text_editor_textarea').sceditor('instance');
    if(!texta) return; 
    var raf= function(){
     
      //var num=texta.val().length;
      // On ne prend pas en compte les mots entre [] ou <>
      var nb = texta.val().replace(/\[.*?\]/g,' ').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 ; 
$('.one').text(nb_mots);
$('.two').text(nb_carac);
};
texta.keyUp(function(){setTimeout(function(){ raf() }, 2000)});raf()})
      }
      });


Milouze14 a écrit:Pour le JS, je pense que c'est celui du fofo concerné car tu as encore déposé la même chose,

Oui effectivement... Je viens d'éditer mon message pour vérifier. Lorsque je colle le code, c'est seulement lors de l'envoi que les balises BBCODE apparaissent dans mon message. De plus je n'ai pas relu mon message après l'envoi, ce qui explique mon erreur. Désolé pour le temps perdu ^^

Milouze14 a écrit:J'ai revu le mien afin de ne pas prendre en compte les smileys en mode html, balise bbcode:
Il est fonctionnel sur les deux modes.

Il fonctionne parfaitement. Un grand merci Phil pour ton excellent travail 

EDIT : Juste une dernière question, possible de compter aussi les espaces comme un caractère ?

Bonne journée à toi

Re Mathis,

EDIT : Juste une dernière question, possible de compter aussi les espaces comme un caractère ?

Il ne faut plus compter les mots alors , logiquement .

Ce sera ce script:

Code:

$(function(){
    if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
      var smil=$('#text_editor_textarea').length;
      if(smil)
      {
    $(function(){
      $('.sceditor-container').after('<div id="M14_Decompte">Nombre de caractère(s):  <span class="two"></span></div>');
    var texta=$('#text_editor_textarea').sceditor('instance');
    if(!texta) return; 
    var raf= function(){
     
      //var num=texta.val().length;
      // On ne prend pas en compte les mots entre [] ou <>
      var nb = texta.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ').replace(/:.*?:/g,' ');
  // On compte le nombre de caractères, sans les espaces
var nb_carac = (nb.match(/./g)||[]).length;
$('.two').text(nb_carac);
};
texta.keyUp(function(){setTimeout(function(){ raf() }, 500)});raf()})
      }
      });

Hello Phil,

Merci mais je viens de faire un test et il compte 4 caractères pour le mot test et 6 pour le même mot mais en gras. Ce n'était pas le cas avec le premier code ^^
Bête question, si on compte les mots et les caractères (espaces compris) dans 2 scripts mais qui seraient affichés dans la même balise div, c'est possible ?
Parce que si je comprends bien, on remplace les balises BBCODE et HTML par un espace, mais il suffirait de les remplacer par rien.

Code:

.replace(/:.*?:/g,'');

Je ne m'y connais pas trop en script... Je me trompe complètement si ça tombe ^^

Si c'est impossible je prendrais le deuxième script.

Hello Mat,
il fallait s'en douter car dans le mode "Wysiwyg " , il n'y a pas de balise:

Code:

</>
[\]


Il va falloir se résigner mon ami .

Mais alors comment se fait-il qu'avec ce code je n'ai pas le problème de balise en mode "Wysiwyg" ?

Code:

$(function(){
    if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
      var smil=$('#text_editor_textarea').length;
      if(smil)
      {
    $(function(){
      $('.sceditor-container').after('<div id="M14_Decompte">Nombre de mot(s):  <span class="one"></span>  Nombre de caractère(s):  <span class="two"></span></div>');
    var texta=$('#text_editor_textarea').sceditor('instance');
    if(!texta) return; 
    var raf= function(){
     
      //var num=texta.val().length;
      // On ne prend pas en compte les mots entre [] ou <>
      var nb = texta.val().replace(/\[.*?\]/g,' ').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 ; 
$('.one').text(nb_mots);
$('.two').text(nb_carac);
};
texta.keyUp(function(){setTimeout(function(){ raf() }, 2000)});raf()})
      }
      });

Difficile de faire mieux Mat.
Pour toi c'est simple à la compréhension.........

Un peu de lecture:
https://cyberzoide.developpez.com/tutoriels/java/regex/

Code:

\S

Un non-caractère blanc :

Hello Mathis,

alors pour que tu comprennes mieux:

Bête question, si on compte les mots et les caractères (espaces compris) dans 2 scripts mais qui seraient affichés dans la même balise div, c'est possible ?

Vaut mieux oublier,c'est impossible tout bonnement,
c'est déjà assez compliqué avec un textarea!!!!!!!!!!!!!

Parce que si je comprends bien, on remplace les balises BBCODE et HTML par un espace, mais il suffirait de les remplacer par rien.

Cette partie:
ne remplace pas par un espace mais n'est pas comptabilisée.

Code:

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


Ne compte par ce qui se trouve entre [ ]

Code:

.replace(/\[.*?\]/g,' ')

Ne compte par ce qui se trouve entre <>

Code:

.replace(/<.*?>/g,' ')

Ne compte par ce qui se trouve entre ::

Code:

.replace(/:.*?:/g,' ')

Lui va rechercher tout ce qui est "un non-caractère blanc" /S dans ce que l'on a cherché auparavant :

Code:

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

Donc la touche espace n'est pas pas comptabilisée.
En espérant que ce soit plus clair pour toi.

Testes ce script

Code:

$(function(){
        if(!$('#text_editor_textarea').length || !$.fn["sceditor"]) return;
          var smil=$('#text_editor_textarea').length;
          if(smil)
          {
        $(function(){
          $('.sceditor-container').after('<div id="M14_Decompte">Nombre de caractère(s):  <span class="two"></span></div>');
        var texta=$('#text_editor_textarea').sceditor('instance');
        if(!texta) return;
        var raf= function(){
        
          
          // On ne prend pas en compte les mots entre [] , <>, ::
          var nb = texta.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ').replace(/:.*?:/g,' ');
      // On compte le nombre de caractères, sans les espaces
     var nb_carac = (nb).length;
 
    $('.two').text(nb_carac);
    };
    texta.keyUp(function(){setTimeout(function(){ raf() }, 500)});raf()})
          }
          });

Il comptera les espaces mais aussi les sauts de ligne etc etc...


En cas ou car j'avais du temps, pour la réponse rapide:

Le script a cocher "Sur les sujets".

Code:

$(function(){ 
$('.block.quick-reply').before('<div id="M14_Decompte" class="post-header">Nombre de caractère(s):  <span class="two"></span></div>');
var editeur=$('textarea[class="textarea"]');
var test= function(){
 // On ne prend pas en compte les mots entre [] , <> ou ::
var nbquick = editeur.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ').replace(/:.*?:/g,' ');
// On compte le nombre de caractères, sans les espaces
var nb_caracquick = (nbquick).length;
  console.log(nb_caracquick);
 
$('.two').text(nb_caracquick);
    };
editeur.keyup(function(){
  setTimeout(function(){ test() }, 500)});test()
   
      });

Bonjour Phil,

D'accord, je vais utiliser le script qui compte les mots et les caractères (sans prendre en compte les espaces).
Merci pour ton aide précieuse ;)
Passe un bon week-end ^^

De rien Mat,
bon Week-end à toi également.