Estoy tratando de envolver cada palabra individual en una página web en una etiqueta para poder diseñarlas individualmente según su letra inicial.
Encontré este método de envolver cada palabra en una etiqueta de intervalo individualmente, pero no puedo encontrar la manera de variar la clase según la primera letra de la palabra.
let e = document.getElementById('words'); e.innerHTML = e.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="word">$2</span>');Lo que está tratando de lograr no se puede hacer con expresiones regulares si desea hacer referencia a las palabras individuales.
Escribí un pequeño fragmento que usa document.querySelector() en su lugar
La propiedad outsideText en el objeto selector de consulta devuelve una cadena de texto sin formato que luego se convierte en una matriz con la función split()
Luego, simplemente recorre la matriz y agrega la etiqueta de estilo y, para obtener la primera letra, he usado la función substring()
const words = document.querySelector("#words").outerText.split(" "); const wordsDiv = document.querySelector("#words") wordsDiv.innerHTML = "" words.map((el) => { wordsDiv.innerHTML += `<span class="${el.substring(0, 1)}">${el}</span> ` }) <div id="words">red green blue orange</div>Prueba esto:
let e = document.getElementById('words'); // Create array with words let words = e.innerHTML.split(' '); // Object with CSS classes and corresponding letter const classes = { a: 'class-one', b: 'class-two', // and so on } // Return array with the new strings words = words.map(word => { const firstLetter = word.substring(0,1); return `<span class="${classes[firstLetter]}">${word}</span>`; }); // Join the array and update the DOM e.innerHTML = words.join(' ');Aquí está pasando lo siguiente:
classes debe recibir, como en el ejemplo, la correspondencia de cada letra con su clase;map , se está devolviendo la primera letra de la palabra y se accede al objeto de clases con esa letra;join para unir todos los textos separándolos con un espacio.Recordando que si hay más de un espacio entre palabras, se producirán inconsistencias, ya que la primera letra será un espacio.
Desde la referencia string.prototype.replace , también puede agregar una función de reemplazo al método, en lugar de una cadena. La función de reemplazo tiene esta forma .
Entonces, si no malinterpreté tu problema, puedes hacer algo similar a esto:
let e = document.getElementById('words'); e.innerHTML = e.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, function(match, p1, p2) { const myClasses = { a: "aword", b: "bword", ... } return `${p1}<span class="${myClasses[p2[0]]}">${p2}</span>' });