Highlighting words from a paragraph using Javascript only

Asked

Viewed 122 times

-1

As part of learning, I’m trying to underline words that are contained in a paragraph in a document html. By my logic, I would have to store this content in a variable and then scroll through it for the modifications to be made. A "designer" words obey a size condition. Words with a certain amount of characters will be underlined in a certain color.

Initially I transformed the string in a array to travel it. In for, I applied the conditions for color change. My question is how to use paragraph content within the loop and how to actually perform color change.

What I’ve done so far:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        Faça elevar o cosmo no seu coração
        Todo o mal combater
        Despertar o poder
        Sua constelação sempre irá te proteger
        Supera a dor e dá forças pra lutar.</br>

        Pegasus Fantasy
        Desejos a realizar
        Pois as asas e um coração sonhador
        Ninguém irá roubar.</br>

        Saint Seiya! Guerreiro das estrelas!
        Saint Seiya! Nada a temer! Hoea!
        Saint Seiya! Unidos por sua força!
        Saint Seiya! Pégasus até vencer!</br>
    </p>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

script js.

let texto = document.querySelector(p)
let texto_copia = texto //backup da variável

texto = texto.split(' ')


for (let index = 0; index < texto.length; index++) {
    let element = texto[index]
    if(element.length == 9){
        document.querySelector(texto).style.backgroundColor = 'blue'
    }else if(element.length == 6){
        document.querySelector(texto).style.backgroundColor = 'green'
    }else if(element.length == 5){
        document.querySelector(texto).style.backgroundColor = 'yellow'
    }

}
javascript html5 for

  • What is "branding"? (in Portugal we do not use that word... )

  • 1

    @Sergio would emphasize a particular part of a text (e. g: lorem ipsum dolor sit Amet)

1 answer

1


Hello,

Let’s see the mistakes:

  • You tried to take the elementp p instead of "p"
  • When you did texto = texto.split(' ');, you tried to cut an object, not a text. For this, you could use texto = texto.innerText.split(" ");

You can make the following code:

const p = document.querySelector("p");
const texto = p.innerText;
const palavras = texto.split(" ");

for (let index = 0; index < palavras.length; index++) {
  let palavra = palavras[index];

  if (palavra.length == 9) {
    palavra = `<span style="color: red">${palavra}</span>`;
  } else if (palavra.length == 6) {
    palavra = `<span style="color: green">${palavra}</span>`;
  } else if (palavra.length == 5) {
    palavra = `<span style="color: yellow">${palavra}</span>`;
  }

  palavras[index] = palavra;
}

p.innerHTML = palavras.join(" ");
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      Faça elevar o cosmo no seu coração Todo o mal combater Despertar o poder
      Sua constelação sempre irá te proteger Supera a dor e dá forças pra
      lutar.<br />

      Pegasus Fantasy Desejos a realizar Pois as asas e um coração sonhador
      Ninguém irá roubar.<br />

      Saint Seiya! Guerreiro das estrelas! Saint Seiya! Nada a temer! Hoea!
      Saint Seiya! Unidos por sua força! Saint Seiya! Pégasus até vencer!<br />
    </p>
  </body>
</html>

  • 1

    Lucas, there really were points where I got lost. I appreciate the feedback. About the branding, the idea resembles passing a text mark over a word, you know? Something like using the background-color, but only in the word. Your solution was excellent, I believe I can adapt!

Browser other questions tagged javascript html5 for

You are not signed in. Login or sign up in order to post.