← Todos los artículos

Tutoriales

Conteo de palabras y tiempo de lectura en cualquier página

15 mayo 2026 · por JustZix Team

¿Cuánto llevará este artículo — dos minutos o veinte? La mayoría de las páginas no lo dicen. Esta regla añade en lo alto de cada artículo una pequeña barra: número de palabras y tiempo de lectura estimado.

La regla

El JavaScript de la regla, patrón de URL para un blog o un sitio que lees:

const art = document.querySelector('article, main, .entry-content');
if (art) {
  const words = art.innerText.trim().split(/\s+/).length;
  const min = Math.max(1, Math.round(words / 200));
  const bar = document.createElement('div');
  bar.textContent = words + ' palabras · ~' + min + ' min de lectura';
  bar.style.cssText =
    'position:sticky;top:0;z-index:9999;padding:6px 12px;' +
    'background:#1f2937;color:#fff;font:13px/1.4 system-ui;' +
    'text-align:center';
  art.prepend(bar);
}

Cómo funciona

Contar las palabras

art.innerText es el texto visible del artículo (sin las etiquetas HTML). split(/\s+/) lo corta en cada secuencia de espacios en blanco — la longitud del array es el conteo de las palabras. Simple y bastante preciso.

200 palabras por minuto

El ritmo medio de lectura-con-comprensión es de 200–250 palabras por minuto. Tomamos 200 como término medio prudente; Math.max(1, ...) impide que un texto breve muestre «0 min».

Una barra sticky

position: sticky; top: 0 mantiene la barra visible mientras haces scroll por el artículo — una pequeña información, siempre al alcance.

Variante — una barra de progreso de la lectura

¿Quieres ver cuánto queda del artículo? Añade en lo alto una barra fina que crece con el scroll:

const p = document.createElement('div');
p.style.cssText =
  'position:fixed;top:0;left:0;height:3px;z-index:99999;' +
  'background:#14b8a6;width:0';
document.body.appendChild(p);
addEventListener('scroll', () => {
  const h = document.body.scrollHeight - innerHeight;
  p.style.width = (scrollY / h * 100) + '%';
});

Trampas

• Cuenta también pies de foto y código. innerText incluye todo lo del contenedor — bloques de código incluidos. Para un artículo típico la diferencia es despreciable.
• Elección del contenedor. Si el contador muestra un número absurdo, querySelector ha golpeado un elemento demasiado amplio — restringe el selector.

Mira también

• Ejemplos — otras reglas listas para usar
• Modo lectura — comodidad para leer hasta el fondo
• Monitor Web Vitals — otra barra informativa en la página

Instala JustZix — y sabe de antemano a qué te enfrentas.