si tengo una array
de palabras javascript
var keywords = ["select","from","where","mars"];
y elemento HTML que contiene un texto
<div id="mytext">Hello from planet mars</div>
¡Cómo usar javascript
para colorear en naranja cualquier palabra que se encuentre en este elemento mytext
de la lista de palabras en la matriz de keywords
!
Aquí hay una manera de hacerlo:
var keywords = ["select", "from", "where", "mars"]; let originalText = document.querySelector("#mytext").innerText for (const word of keywords) { originalText = originalText.replace(new RegExp(word, "g"), `<span class="orange">${word}</span>`) } document.querySelector("#mytext").innerHTML = originalText
.orange { color: orange; }
<div id="mytext">Hello from planet mars</div>
estamos iterando sobre las palabras clave y reemplazando el HTML interno con un nuevo contenido donde envolveríamos las menciones de la palabra clave con un marcado que le daría un color.
var keywords = ["select","from","where","mars"]; let div = document.getElementById('mytext') let text_content = div.textContent.split(' ') let html = text_content.map(e => { return keywords.includes(e) ? `<span class='orange'>${e}</span>` : e }) div.innerHTML = html.join(' ')
.orange{ color:orange; }
<div id="mytext">Hello from planet mars</div>
<html> <head></head> <body> <div id="mytext">Hello from planet mars</div> <script> var keywords = ["select","from","where","mars"]; mytext=document.getElementById("mytext"); len=keywords.length; for(i=0;i<len;i++){ mytext.innerHTML=mytext.innerHTML.replaceAll(keywords[i],"<span style='color:orange;'>"+ keywords[i] +"</span>"); } </script> <body>
Puede usar este código y reemplazar el color naranja con el color que desee
var keywords = ["select","from","where","mars"]; mytext=document.getElementById("mytext"); len=keywords.length; for(i=0;i<len;i++){ mytext.innerHTML=mytext.innerHTML.replaceAll(keywords[i],"<span style='color:orange;'>"+ keywords[i] +"</span>"); }
<html> <head></head> <body> <div id="mytext">Hello from planet mars</div> <body> </html>