Question

I would like to perform a regular expression in jQuery to find all the HTML right arrow entities → on my site and add a class of “arrow-style”. My CSS class of “arrow-style” has a specific font that is different from the other fonts used, hence why I just want to select just the arrow entity so I can style it.

These are what I mean by HTML entities: http://www.w3schools.com/tags/ref_symbols.asp
(please search for arrow)

For example, I would like the following to be queried throughout my site and have a class added to it. However, I cannot simply select all <a> as these arrow entities are in a variety of HTML markup (they’re not just in <a> tags)

<a href="#">Learn More &rarr;</a>

Output should be:

<a href="#">Learn More <span class="arrow-style">&rarr;</span></a>

Answer 1

The following code should work:

​$("body *")​​​.html(function(i, val) {
    return val.replace(/(→)/g, "<span class='arrow-style'>$1</span>");
});​

DEMO: http://jsfiddle.net/yga64/