Comment afficher le nombre de mots sélectionnés dans Webflow ?

Apprenez à afficher le nombre de mots et de caractères sélectionnés sur votre site Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher le nombre de mots et de caractères sélectionnés sur votre site Webflow, comme dans Google Docs.

Exemple

Sélectionnez du texte dans ce paragraphe

Sélectionnez n'importe quelle portion de ce texte pour voir apparaître le compteur de mots et de caractères en bas de la page. Plus vous sélectionnez de texte, plus le compteur augmente en temps réel. C'est un détail UX subtil qui améliore l'expérience de lecture sur les articles longs et les pages de documentation technique.

Info affichée	Source	Exemple
Nombre de mots	window.getSelection().toString()	3 mots
Nombre de caractères	text.length	18 caractères
Position	Fixed bottom center	Toast discret en bas de page

1. Créez le conteneur dans Webflow

Créez un Div avec l'ID selection-count n'importe où dans la page (il sera positionné en fixed par le script). Laissez-le vide : le script injecte le contenu et gère la visibilité.

2. Ajoutez le script dans Footer code

(function() {
  var display = document.getElementById('selection-count');
  if (!display) return;

  display.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);' +
    'background:#111;color:#fff;padding:8px 16px;border-radius:100px;font-size:13px;' +
    'opacity:0;transition:opacity 0.2s,transform 0.2s;pointer-events:none;z-index:9999;white-space:nowrap;';

  document.addEventListener('selectionchange', function() {
    var sel = window.getSelection();
    var text = sel ? sel.toString().trim() : '';
    var words = text ? text.split(/\s+/).filter(Boolean).length : 0;
    var chars = text.length;

    if (words > 0) {
      display.textContent = words + ' mot' + (words > 1 ? 's' : '') + ' · ' + chars + ' caractères';
      display.style.opacity = '1';
      display.style.transform = 'translateX(-50%) translateY(0)';
    } else {
      display.style.opacity = '0';
      display.style.transform = 'translateX(-50%) translateY(20px)';
    }
  });
})();

3. Variante : afficher dans un élément existant

Pour afficher le compteur dans un élément de votre layout plutôt qu'en toast fixed :

document.addEventListener('selectionchange', function() {
  var text = window.getSelection().toString().trim();
  var words = text ? text.split(/\s+/).filter(Boolean).length : 0;
  var el = document.getElementById('selection-count');
  if (el) el.textContent = words > 0 ? words + ' mots sélectionnés' : '';
});

bon à savoir

L'événement selectionchange se déclenche à chaque changement de sélection, y compris les sélections partielles pendant le drag. C'est normal et ne cause pas de problème de performance. Si vous voulez déclencher uniquement à la fin de la sélection (mouseup), remplacez selectionchange par mouseup.

Conclusion

Un détail UX qui montre l'attention portée à l'expérience de lecture. Cas d'usage :

Articles techniques avec du code à copier
Pages de documentation ou de legal
Outils de rédaction ou éditeurs de texte

Sélectionnez du texte dans ce paragraphe

Sélectionnez n'importe quelle portion de ce texte pour voir apparaître le compteur de mots et de caractères. Plus vous sélectionnez de texte, plus le compteur augmente. C'est un détail UX subtil qui améliore l'expérience de lecture sur les articles longs.

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute