Grow your CSS skills. Land your dream job.

Last updated on:

Find and Wrap Ampersands

Load this plugin. Then:

$("body *").replaceText( /&/gi, '<b class="ampersand">' + '&' + '</b>' );

Change the selector as needed. That one is pretty intense.

Now you have a class name you can use to style them specially.

.ampersand {
   font-family: Baskerville, Some Other Cool Font, Serif;
   font-style: italic;

Reference URL


  1. Just a note, but the snippet is missing the HTML that surrounds the ampersand with an element with a class of ampersand.

  2. I don’t think you’re escaping your HTML correctly in the example above..

  3. Hi Chris !

    Whouldn’t this become a problem when you have special unicode chars like ×, < or whatever ? Will it break those chars ?

  4. JQuery .highlight() text plugin:

    jQuery.fn.highlight = function(str, className) {
        var regex = new RegExp(str, "gi");
        return this.each(function() {
            $(this).contents().filter(function() {
                return this.nodeType == 3 && regex.test(this.nodeValue);
            }).replaceWith(function() {
                return (this.nodeValue || "").replace(regex, function(match) {
                    return "<span class=\"" + className + "\">" + match + "</span>";

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".