使用Java脚本更改HTML标记中特定文本的颜色

Question

The question says it all. For example I have the following HTML code:

<span id="span">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<span>

How do I change the color of the color of any word from above without modifying the span above(I know I could have put another span tag with an id="text" and used document.getElementById("text").style.color="red"; . But instead of this I want to search for the word in the tag(maybe using RegExp) and change it's color dynamically.

Answer 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.)