0
211
Viewschange color of words within an array
if i have an javascript array of words
var keywords = ["select","from","where","mars"];
and HTML element holding a text
<div id="mytext">Hello from planet mars</div>
How to use javascript to color in orange any word found in this element mytext of words list in the array keywords !
·
Juan Pablo Isaza
3 answers
Answer question0
Here is one way to do it:
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>we are iterating over the keywords and replacing the innerHTML with a new content where we would wrap mentions of the keyword with a markup that would give it a color.
·
Juan Pablo Isaza
Report
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
Report
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>
You can use this code and replace the orange color with the color you want
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
Report
Answer question