Entonces, como sugiere el título, he estado trabajando en una extensión de Chrome para cambiar el color de cada palabra en un sitio web (para ayudar con mi lectura de TDAH)
El código que tengo se ejecuta sin errores, pero no parece hacer nada. Las partes que he comentado son cuando estaba tratando de dividir cada párrafo palabra por palabra, pero me rendí un poco para simplificar temporalmente
var paragraph = document.getElementsByTagName("p"); var words = paragraph; //.innerHTML.split(" "); var colours = ["red", "purple", "blue"]; var spans = []; for(var i = 0; i<words; i++){ var colour = colours[Math.floor(Math.random()*colours.length)] var span = "<span style='color:" + colour + ";'>" + words[i] + "</span>" spans.push(span); } //paragraph.innerHTML = spans.join(" "); words.innerHTML = spans.join(" ");Hay varios problemas en su código.
getElementsByTagName() devuelve una colección de elementos (tienes que iterarlo).split() obtendrá contenido completo en lugar de palabrasinnerHtml() y split() probablemente no funcionará con HTML complejo Me gustaría sugerirle un enfoque diferente. Encontraría cada palabra con span con expresión regular en todo el documento (o elemento) y la envolvería con una clase específica y la diseñaría con CSS. Algo como esto:
const root = document.querySelector('p'); root.innerHTML = root.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="word">$2</span>'); .word:nth-child(1n-1) { color: green; } .word:nth-child(2n-1) { color: red; } .word:nth-child(3n-1) { color: blue; } <p> some words some words some words some words some words some words </p> Si desea colores aleatorios, puede cambiar el segundo parámetro de replace con la función que se llama en cada iteración. Algo como esto:
const root = document.querySelector('p'); const colors = ["red", "purple", "blue"]; root.innerHTML = root.innerHTML.replace( /(^|<\/?[^>]+>|\s+)([^\s<]+)/g, (match) => { const color = colors[Math.floor(Math.random()*colors.length)]; return ` <span style="color: ${color}">${match}</span>` } ); <p> some words some words some words some words some words some words </p>