Change Color Of Specific Text Within Html Tags Using Javascript

The question says it all. For example I have the following HTML code: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

Solution 1:

You can't do it without modifying the contents of the span. So you either do that in the source, or you do it later by manipulating the DOM (in your case, via jQuery).

So for instance:

var span = $("#span");
span.html(span.html().replace(/dolor/, '<span style="color: red">$&</span>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="span">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</span>

The $& in the replacement string is the word that was found. In the above, only the first occurrence would be replaced; to replace multiple occurrences, add a g to the end of the regular expression (/dolor/g).

Note that if you have any event handlers attached to any elements within the span, they will get removed by this, as the contents of the span get removed and then replaced. (As your example doesn't have any elements at all within the span, I figured that wouldn't be the case, but figured I should mention it.)

Share