Change Asterisk color inside div
This is much more complicated than you think. You will need to change your HTML and add some wrapping element like <span>
. You can do something like this:
$("p").each(function() {
var html = $(this).html().replace(/\*/g, "<span class=\"asterisk\">*</span>");
$(this).html(html).find(".asterisk").css("color", "red");
});
source to share
try this:
$('.highlight').each(function(){
this.innerHTML = this.innerHTML.replace(/\*/g, '<span class="asterisk">*</span>');
});
see example: http://jsfiddle.net/4XrSS/
source to share
find
returns elements using the specified selector. Since *
will match all elements, this is mostly non-op. What you are trying to do is select part of the element. It's impossible. First you need to create a specific element around the asterisk.
Decision:
You can use a helper method to wrap everything *
in span
with a custom class:
$('.highlight').each(function() {
var regex = new RegExp('\*', 'g');
this.innerHTML = this.innerHTML.replace(regex, '<span class="hilite">*</span>');
}
)
Then you just apply the formatting that the class requires hilite
.
Edit: Code changed here Highlight word with jQuery , there are a few more suggestions that might help.
Edit2: Added suggestions from comments and explanations above
source to share