3

I'm trying to change the color of the Asterisk but I can't target the matching character.

Does anyone know how you target the particular text to change it to be red?

My code below changes add the text to be red.

$('.highlight').find('*').css('color','#ff0000');
user1284329
  • 105
  • 2
  • 6
  • 2
    You can't change the color of a text node. You need to wrap the `*` in a element (such as a ``) and color that. – gen_Eric Apr 02 '12 at 14:39
  • 2
    The best way to do this is to wrap the asterisk in a pair of `` tags with a special class. You can then add css styles to that span tag, or better yet, add/remove new classes to it as needed. – Blazemonger Apr 02 '12 at 14:39

6 Answers6

4

That's a lot more complicated than you might think. You'll need to modify your HTML and add some wrapping element like a <span>. You could do something like that:

$("p").each(function() {
    var html = $(this).html().replace(/\*/g, "<span class=\"asterisk\">*</span>");
    $(this).html(html).find(".asterisk").css("color", "red");
});​

Live example

Alex Turpin
  • 46,743
  • 23
  • 113
  • 145
  • 1
    this would not work if you have more than one p element, see: http://jsfiddle.net/akQ75/ – red-X Apr 02 '12 at 14:51
2

try the following:

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

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

red-X
  • 5,108
  • 1
  • 25
  • 38
1

Put a span (or another inline-level element) around it and style the span.

JS:

var text = $('.highlight').text();
$('.highlight').html(text.replace('*', '<span>*</span>'));

CSS:

.highlight span {
    color: #ff0000;
}

Edit: oops, find('*') is not working, use replace

Frank van Wijk
  • 3,234
  • 20
  • 41
1

find returns elements using the specified selector. Since * will match all elements, it's basically a no-op. What you are trying to do is selecting part of an element. This is not possible. You have to create a specific element arround the asterisk first.

Solution:

You can use a helper method to wrap all * in a 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 you want for the hilite class.

Edit: The code is modified from here Highlight a word with jQuery there are also some more suggestions which might help.

Edit2: added suggestions from comment & explanation above

Community
  • 1
  • 1
aKzenT
  • 7,775
  • 2
  • 36
  • 65
  • 1
    You know you could also pass your `hilite` function directly and use `$(this)` directly inside to save a function call. – Alex Turpin Apr 02 '12 at 14:45
  • 1
    `hilite($(this));` should be `hilite(this);`. – gen_Eric Apr 02 '12 at 14:45
  • 1
    @aKzenT Well you've implemented my suggestion, but the problem that Rocket pointed out is still there. `$(this)` will give you the jQuery object, but you're using native DOM properties (`innerHTML`). So use `this` instead. – Alex Turpin Apr 02 '12 at 14:50
0

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/

Community
  • 1
  • 1
Greg
  • 8,574
  • 21
  • 67
  • 109
0

Not sure what your finished output is supposed to look like, but might be a fun application of the ":before" css selector and "content" property. You could do something like...

.div-with-asterisk:before {
    content: "*";
    color: red;
 }

reference: http://www.w3schools.com/cssref/sel_before.asp

CambridgeMike
  • 4,562
  • 1
  • 28
  • 37