Highlight Non-breaking spaces in HTML page or WordPress editor

While editing in WordPress, I sometimes use non-breaking spaces in headers so that words stay together. When I save, the non-breaking spaces are there, but they look like normal spaces, so I can't see them. Also, WordPress creates non-breaking spaces when I type in the body of my post, which I have to remove somehow.

I thought it'd be easy to create a bookmarklet that uses jQuery to highlight non-breaking spaces in a web page or the editor. However, I'm no good with regular expressions, or maybe there's something else I'm doing wrong. Here's the jQuery code:

    $('p').html($('p').html().replace(/ [\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000]/g, '<span class="red">&nbsp;</span>'));

Here's a jFiddle: http://ift.tt/1cLc572

I'm open to other suggestions as well :-)