Click here to Skip to main content
15,860,972 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello
I have some li tags that I want to find a specific word in them and change the color of the word using JavaScript:

What I have tried:

code one:
JavaScript
var text = result.replace(_word, _word.fontcolor("red"));
var _test = document.createTextNode("text");

it just replace
JavaScript
"<font color='red'> _word </font>"
with _word instead of changing color.

code tow:
JavaScript
var text = result.replace(_word, "<span style='color:red'>" + _word "</span>");
var _test = document.createTextNode("text");

it just replace
JavaScript
"<span style='color:red'> _word </span>"
with _word instead of changing color.
Posted
Updated 31-Dec-16 22:17pm

You use createTextNode which creates just a text node, no HTML element.

It looks like you want to replace the old HTML of an element with the new HTML containing the colored words. I cannot see how you access the elements from your JavaScript, but what you can do is basically this:
JavaScript
var element = ...; // if you want to get the element by ID: document.getElementById("your-element");
var originalHtml = element.innerHTML;
var newHtml = originalHtml.replace(_word, _word.fontcolor("red"));
element.innerHTML = newHtml;

Note that .replace only replaces the first occurrence of the word. If you want to replace all occurrences, you can use a regular expression:
JavaScript
var newHtml = originalHtml.replace(new RegExp(_word, "g"), _word.fontcolor("red")); // "g" means "global"

Also note that setting the innerHTML property causes the element to lose all event handlers. So if you have event handlers bound to your "li"-elements, then I recommend to not put your text immediately in the li-tag, but in another tag in the li tag, like this: <li><span>your text here</span></li>.
 
Share this answer
 
v2
Comments
Ali Majed HA 1-Jan-17 5:35am    
Thanks a lot, Your solution has solved my problem, But would you please tell me more about your fir line of solution ? Do you mean Using createTextNode prevent my text to be rendered ?
Thanks in Advance
Thomas Daniels 1-Jan-17 5:37am    
My first line means: you should not use createTextNode. It just creates a *text* node, with no understanding of HTML. So that wouldn't work.
Check this out and adapt:
<!DOCTYPE html>
<html>
<body>

<p id="demo">Visit CodeProject!</p>

<button onclick="changeSubStringColor()">Try it</button>

<script>
function changeSubStringColor() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("CodeProject", "<span style='color:red'>CodeProject</span>");
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>
 
Share this answer
 
Comments
Ali Majed HA 1-Jan-17 5:36am    
Thanks for your solution. but programFOX solution has solved my specific problem. Thanks again

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900