Click here to Skip to main content
14,543,273 members
Rate this:
Please Sign up or sign in to vote.
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:
var text = result.replace(_word, _word.fontcolor("red"));
var _test = document.createTextNode("text");

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

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

it just replace
"<span style='color:red'> _word </span>"
with _word instead of changing color.
Posted
Updated 31-Dec-16 22:17pm
Rate this:
Please Sign up or sign in to vote.

Solution 1

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:
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:
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>.
   
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.
Rate this:
Please Sign up or sign in to vote.

Solution 2

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>
   
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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100