change First letter of word font size with javascript/jquery

Question

Is there a way to select the first letter of each word with either javascript or jQuery?

Im trying to make tags on my page have the first letter of each word be a bigger font size. Im assuming it involves regular expressions but all i keep finding are things for form validation. I also see a bunch of stuff for capitalizing the first word. I'm trying to change the font size.

Does anyone know if this can be done and how? Thanks.

Answer 1

If you are just looking for a styling change, you might be able to get away with pure CSS using :first-letter .

Here's an example: http://jsfiddle.net/bgNP3/1/

Note: I apparently had to make the span s into inline-block s for the effect to work.

Update fixed link to jsfiddle.

Answer 2

You could try using:

• letteringjs its may be a little more complex than what you need tho, or
• you could use this Is there any clean CSS method to make each letter in a word a different color?