Change formatting of a specific character using css or jquery

Question

I sometimes build quick and dirty html menus or other types of lists using a pipe | to separate elements, ie:

Home | edit | etc...

I like to make the pipes bold and colored, and wonder if there is a quick way to select a specific character in css styles. (or maybe JS/jquery)

I do know that I can do this with spans around the pipe, but thought it might be elegant to be able to select just this character.

Blazemonger · Accepted Answer · 2012-08-22 17:37:41Z

7

You can pass a callback function to the .html() method to wrap those characters in spans for you:

$('p.menu').html(function(i,el) {
    return el.replace(/\|/g, '<span class="sp">|</span>');
});

http://jsfiddle.net/mblase75/ymE6y/

answered Aug 22, 2012 at 17:37

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kevin Over a year ago

that is awesome...jaw drop here.

Blazemonger Over a year ago

You're welcome -- please don't forget to accept your favorite answers to your questions.

Eric Over a year ago

I'm fairly new to jquery, what are the i and el arguments doing?

Blazemonger Over a year ago

@user1803405 It's in the documentation -- i is the (zero-based) index number of the element that's being acted on, while el is the original string (and which I should have named str instead, but too late now).

Collectives™ on Stack Overflow

Change formatting of a specific character using css or jquery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related