Is there any way to format an entire row while finding word on page

Asked

Viewed 92 times

1

The idea is this.. when I call a function that brings values from a string included in the script I want the word(s) (s) to begin as an example:

  • & Neutral Colors

If highlight of the others, suppose some simple phrases, such as:

Cores do Arco-Íris

Cores sortidas

Diversas cores e sabores

Sem cor, apenas Neutro

Preto-e-Branco, neutro

Sabão neutro

Well, these lines should stay on "bold" already containing the words & Neutral Colors.

I’ve been betting my record on this routine:

var negrito = "cores";
var indexar = string.indexOf(negrito);
if (indexar != -1) {
    // se for diferente de -1 é que a palavra foi localizada então faça uma ação
    ..style.fontWeight='bold';
}
javascript quest dom

  • It will depend on how this separate your line in the gift.

  • Because you have to know where the phrase limit is, if a phrase is bounded by a tag p for example, just put this property in the tag p, but if the separation is by an n you will have to separate this phrase, that’s what I’m trying to say.

  • But the phrases are in a tag p in html, or variables in script?

  • @Leandro In the HTML document without the tag p, it comes from the script when I click the button. It is not involved between delimiters <p>..</p> That is why I want to invest in the above routine, because you should look for the word after being brought forward, already on the page. Hence apply the formatting.

  • Formatting only the found word would be much simpler. The whole line is complicated, unless there is some non-visual mark from where it is the beginning and end of each line.

  • 1

    Take a look at this answer here on the site, I think it serves as a basis: https://answall.com/a/48604

Show 1 more comment

2 answers

2


One way is to include everything in one <span> to have a reference and separate lines with \n, then make a filter and include the tags <b></b> in the text containing the words desired (explanations in the code).

var negrito = document.querySelector("body span").textContent // pega o texto da span
.split('\n') // converte em array pela quebra de linha
.filter(function(v){ // descarta valores vazios
   return v;
})
.map(function(v){
   if(/cores|neutro/.test(v.toLowerCase())){ // verifica as duas palavras sem diferenciar maúsculo e minúsculo
      v = '<b>'+v+'</b>'; // concatena negrito
   }
   return v; // retorna o valor
})
.join('<br>'); // converte em string com quebra de linha

 document.querySelector("body span").innerHTML = negrito; // substitui o conteúdo da span
<span>
   Cores do Arco-Íris
   Cores sortidas
   Diversas cores e sabores
   Sem cor, apenas Neutro
   nada aqui
   Preto-e-Branco, neutro
   Sabão neutro
</span>

1

Dude I made an example here, just to give you an idea, until pq I did not understand very well where are the paragraphs that you do the match. I used the method includes() to look for the occurrence in the paragraph and I did a go through all paragraphs. I hope at least give you an idea.

var pTag = document.getElementsByTagName("p");
var i;

for(i=0; i<pTag.length; i++) {
  var p = pTag[i].textContent;
  var cores = p.includes("Cores");
  var neutro = p.includes("Neutro");

  if(cores || neutro) {
    document.getElementsByTagName("p")[i].style.fontWeight = "bold";
  } else {
    document.getElementsByTagName("p")[i].style.color = "red";
  }
}
<p>Cores do Arco-Íris</p>
<p>Cores sortidas</p>
<p>Diversas cores e sabores</p>
<p>Sem cor, apenas Neutro</p>
<p>Preto-e-Branco, neutro</p>
<p>Sabão neutro</p>

  • Good news! It was almost that, but there is no p only text. But it is already valid.

  • Then trade <p> for <span>, what is the problem? Some tag has to have this blessed text, but how will you select it uniquely?

Browser other questions tagged javascript quest dom

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