Tengo 2 problemas:
const text = [ `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant` ]; // this is what i want to use instead of 'p' but also below not working function selectWord() { //const p = document.querySelector('p'); text.innerHTML = text.innerText .split('') .map((word) => word.length > 5 ? `<span class="lightext">${word}</span>` : word ) .join(''); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lightext { background-color: yellow; } </style> </head> <body> <p>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p> </body> <script src="app1.js"></script> </html>Entonces, hay algunos problemas. Supongo que cambió el código para la prueba porque no está llamando a la función selectWord() ninguna parte (y el elemento está comentado).
No puede usar .split('') porque eso divide las cadenas en caracteres individuales, no en palabras, por lo que todo tiene una longitud de 1. Debe cambiar tanto su split como su join para que sean .split(' ') y .join(' ') .
Tenga en cuenta también que su variable de text es una matriz, no un objeto DOM. Por lo tanto no posee las propiedades innerHTML e innerText
El guión correcto sería.
function selectWord(str) { const el = document.querySelector("p") const highlightedText = str.split(' ').map((word) => word.length > 5 ? `<span class="lightext">${word}</span>` : word).join(' ') el.innerHTML = highlightedText } selectWord('this is a longer string than normal')Simplemente arreglé los errores obvios en su código. En particular, dividir palabras en espacios (donde tenía una cadena vacía) y luego volver a ensamblarlas de la misma manera.
function selectWord() { const p = document.querySelector('p'); console.log(p.innerText.split(' ')); p.innerHTML = p.innerText .split(' ') .map((word) => word.length > 5 ? `<span class="lightext">${word}</span>` : word ) .join(' '); } selectWord(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lightext { background-color: yellow; } </style> </head> <body> <p>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p> </body> <script src="app1.js"></script> </html> const text = `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant`; // this is what i want to use instead of 'p' but also below not working function selectWord() { const p = document.querySelector('p'); p.innerHTML = text .split(' ') .map((word) => word.length > 5 ? `<span class="lightext">${word}</span>` : word ) .join(' '); } selectWord(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lightext { background-color: yellow; } </style> </head> <body> <p>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p> </body> <script src="app1.js"></script> </html>