Temps de lecture d'un article ou d'un bloc de texte

Afficher le temps de lecture dynamiquement sur une page (et non via le CMS)

Language: Javascript

Catégorie : Utilities

<script>

function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Display Read Time -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/util/read-time.js"></script>

<script>

function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();

</script>

Les attributes

Rich Text - Identifier l'élément qui permettra de compter le temps de lecture

Nom

js-util-readcontent

Valeur

Ajouter l'attribute à l'élément pour lequel on souhaite compter le temps de lecture‍

Aucune valeur nécessaire

Paragraph - Identifier l'élément qui affichera le temps de lecture

Nom

js-util-readtime

Valeur

Ajouter l'attribute à l'élément qui servira à afficher le temps passé

Aucune valeur n'est nécessaire

Rich Text - Modifier le nombre de mots par minute OPTIONNEL

Nom

js-util-read-wpm

Valeur

[identifier]

Ajouter l'attribute au Rich Text soit au même niveau que l'attribute js-util-readcontent

‍

Le nombre de mots par minute est défini à 265 par défaut. Vous pouvez le changer pour ajuster le temps de lecture réel.

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du script

<script>

function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();

</script>