▷ Separar un Texto en Etiquetas HTML Individuales con JavaScript

Cuando trabajamos con textos en HTML, a veces necesitamos manipular su estructura de manera más granular, como dividir un título o párrafo en etiquetas HTML individuales. Esto puede ser útil para efectos animados o interacción con el usuario. A continuación, te explicaré cómo puedes separar un texto en palabras y caracteres, encapsulándolos en etiquetas <div> y <span> utilizando JavaScript.

El Código

Repositorio de github: Código completo

El siguiente fragmento de código JavaScript separa un título de una página web, palabra por palabra y luego, carácter por carácter. Cada palabra se envuelve en un contenedor <div>, y cada carácter dentro de la palabra se envuelve en un <span>. Esto permite una manipulación más precisa y estilizada del texto.

// Espera a que el contenido del DOM se haya cargado completamente
document.addEventListener("DOMContentLoaded", function () {
  // Selecciona el elemento que contiene el título de la sección
  const textContainer = document.querySelector("#sectionTitle");
  // Obtiene el contenido del título
  const textToSeparate = sectionTitle.innerHTML;
  // Divide el título en palabras utilizando un espacio como separador
  textContainer.innerHTML = textToSeparate
    .split(" ")
    .map((e) => {
      // Crea un contenedor div para cada palabra
      const wordContainer = document.createElement("div");
      wordContainer.classList.add("word-container");
      // Divide la palabra en caracteres individuales
      const word = e.split("").map((e) => {
        // Crea un elemento span para cada carácter
        const character = document.createElement("span");
        character.classList.add("character");
        character.innerHTML = e;
        // Devuelve el código HTML del carácter
        return character.outerHTML.toString();
      });
      // Llena el contenedor de palabra con los caracteres
      wordContainer.innerHTML = word.join("");
      // Devuelve el código HTML del contenedor de palabra
      return wordContainer.outerHTML.toString();
    })
    // Combina todas las palabras fragmentadas para reconstruir el título
    .join(" ");
});

Explicación Paso a Paso

1. Escuchar el Evento DOMContentLoaded
   El script comienza escuchando el evento DOMContentLoaded para asegurarse de que el DOM esté completamente cargado antes de ejecutar el código.
2. Seleccionar el Contenedor de Texto
   Utilizamos document.querySelector para seleccionar el elemento que contiene el texto, en este caso, un elemento con el ID #sectionTitle. Esto puede ser cualquier otro elemento HTML, como un encabezado o un párrafo.
3. Obtener el Contenido de Texto
   Usamos textContainer.innerHTML para obtener el contenido actual del elemento seleccionado.
4. Separar el Texto en Palabras
   El método split(" ") divide el texto en un arreglo de palabras, utilizando los espacios como delimitadores.
5. Crear un Contenedor para Cada Palabra
   Por cada palabra en el arreglo, creamos un nuevo elemento <div> con la clase word-container, que contendrá los caracteres de esa palabra.
6. Dividir las Palabras en Caracteres
   Para cada palabra, la función split("") divide la palabra en caracteres individuales, y luego, cada carácter es envuelto en un <span> con la clase character.
7. Reconstruir el Texto
   Después de crear los contenedores para cada palabra y carácter, los combinamos de nuevo en un solo bloque de HTML con join(" "), que une las palabras separadas por espacios.

Aplicaciones Prácticas

• Animaciones de Texto: Puedes aplicar transiciones CSS para animar la aparición o el movimiento de cada carácter o palabra individualmente.
• Estilos Individuales: Es posible aplicar diferentes estilos a cada letra o palabra, lo que facilita la creación de diseños tipográficos dinámicos y creativos.
• Interacciones con el Usuario: Puedes agregar eventos a cada carácter o palabra, como un efecto de "hover" o un click para mejorar la interactividad.

Conclusión

Este enfoque de separar un texto en etiquetas HTML individuales con JavaScript es una técnica poderosa para aquellos que buscan personalizar la presentación de contenido web a un nivel detallado. Mediante el uso de las etiquetas <div> y <span>, se logra una estructura de fácil acceso y manipulable tanto con CSS como con JavaScript, abriendo un abanico de posibilidades para animaciones, interacciones y diseño.

Repositorio de github: Código completo