Estoy tratando de dividir una oración/palabra en letras separadas y pude lograrlo usando el siguiente código.
var textWrapper = document.getElementById("heading"); textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); <h1 class="heading" id="heading"> Hello! </h1>Aporte
<h1> Hello! </h1>Lo que obtengo de esto
<h1> <span class="letter">H</span> <span class="letter">e</span> <span class="letter">l</span> <span class="letter">l</span> <span class="letter">o</span> <span class="letter">!</span> </h1>Lo que quiero
<h1> <span class="letter-1">H</span> <span class="letter-2">e</span> <span class="letter-3">l</span> <span class="letter-4">l</span> <span class="letter-5">o</span> <span class="letter-6">!</span> </h1>¿Qué puedo hacer para lograr esto?
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter-{what should I do here?}'>$&</span>");Si no es posible de esta manera, estoy de acuerdo con alguna otra forma de lograrlo.
No tengo conocimiento en expresiones regulares, así que así es como lo haría.
const heading = document.getElementById("heading"); const letters = heading.innerText.split("").map((letter, index) => { const span = document.createElement("span"); span.innerText = letter; span.classList.add("letter-" + (index + 1)); return span; }); heading.innerHTML = ""; letters.forEach((span) => heading.appendChild(span));Tienes que usar algún tipo de bucle para agregar el índice de caracteres también
var textWrapper = document.getElementById( "heading" ); // `<span class='letter-${++index}'>$&</span>` const text = textWrapper.textContent.trim(); textWrapper.innerHTML = ""; text.split("").forEach((char, i) => { const span = document.createElement("span"); span.classList.add(`letter-${i + 1}`); span.textContent = char; textWrapper.appendChild(span); }) <h1 class="heading" id="heading"> Hello! </h1>Si realmente desea usar expresiones regulares para esto, puede pasar una devolución de llamada a replace() y acceder a la match y el offset de la coincidencia dentro de la cadena completa.
var textWrapper = document.getElementById('heading'); textWrapper.innerHTML = textWrapper.textContent.replace( /\S/g, (match, offset) => `<span class='letter_${offset}'>${match}</span>` ); console.log(textWrapper.outerHTML); <h1 class="heading" id="heading"> Hello! </h1> Si no desea confiar en el offset , sino que desea un contador controlado, puede incrementar el suyo propio, aquí usando un cierre
((c)=>(match) => `<span class='letter_${c++}'>${match}</span>`)(1) var textWrapper = document.getElementById('heading'); textWrapper.innerHTML = textWrapper.textContent.replace( /\S/g, ((c) => (match) => `<span class='letter_${c++}'>${match}</span>`)(1) ); console.log(textWrapper.outerHTML); <h1 class="heading" id="heading"> Hello! </h1>