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');

      

+3


source to share


6 answers


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

+4


source


try this:

$('.highlight').each(function(){
  this.innerHTML = this.innerHTML.replace(/\*/g, '<span class="asterisk">*</span>');
});

      



see example: http://jsfiddle.net/4XrSS/

+2


source


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

+1


source


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

+1


source


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/

0


source


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

0


source







All Articles