Change Asterisk color inside div
I am trying to change the Asterisk color but cannot customize the target character.
Does anyone know how you target specific text to change it to red?
My code below adds text to red.
$('.highlight').find('*').css('color','#ff0000');
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");
});
Live example
try this:
$('.highlight').each(function(){
this.innerHTML = this.innerHTML.replace(/\*/g, '<span class="asterisk">*</span>');
});
see example: http://jsfiddle.net/4XrSS/
Place a span
(or other line level element) around it and style span
.
JS:
var text = $('.highlight').text();
$('.highlight').html(text.replace('*', '<span>*</span>'));
CSS
.highlight span {
color: #ff0000;
}
Edit : oops, find ('*') doesn't work, usereplace
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
I wrote this based on this SO answer
CSS
.red { color: red; }
JQuery
$("body :contains('*')").html(function() {
return $(this).html().replace('*', '<span class="red">*</span>');
});
http://jsfiddle.net/EUb3Y/
Not sure what your finished output should look like, but might be an interesting application of ": before" css and "content" selectors. You could do something like ...
.div-with-asterisk:before {
content: "*";
color: red;
}
link: http://www.w3schools.com/cssref/sel_before.asp