0
210
Visualizaçõescambiar el color de las palabras dentro de una matriz
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 !
·
Juan Pablo Isaza
3 Respostas
Responde à pergunta0
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.
·
Juan Pablo Isaza
Relatório
0
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>
·
Juan Pablo Isaza
Relatório
0
<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>
·
Juan Pablo Isaza
Relatório
Responde à pergunta