Highlight Non-breaking spaces in HTML page or WordPress editor

2 Views

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:

Read More
    $('p').html($('p').html().replace(/ [u00a0u1680u180eu2000-u200au2028u2029u202fu205fu3000]/g, '<span class="red">&nbsp;</span>'));

Here’s a jFiddle:
https://jsfiddle.net/y18e0c1w/

========

Maraca helped me out here (see below). I created the bookmarklet with his code, and added a white-space:nowrap to the span so that you can still see the highlight if it’s at the end of a line. Here it is: 

javascript:function%20escapeRegExp(e){return%20e.replace(/([.*+?^=!:${}()][/\])/g,"\$1")}function%20replaceAll(e){return%20e.string.replace(new%20RegExp(escapeRegExp(e.search),"g"),e.replace)}jQuery("body").html(replaceAll({string:jQuery("body").html(),search:"&nbsp;",replace:'<u%20style="background:#FF0;white-space:nowrap">%20</u>'}));

Remember, it relies on jQuery already being loaded on the page. It doesn’t play nice with the WordPress backend, but it works on the frontend and that’s good for me right now. Hope someone else finds this useful too.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Got it: https://jsfiddle.net/y18e0c1w/2/

    function escapeRegExp(s) {
    return s.replace(/([.*+?^=!:${}()][/\])/g, '\$1');   
}

function replaceAll(p) {
 return p['string'].replace(new RegExp(escapeRegExp(p['search']), 'g'), p['replace']);   
}

$('p').html(
    replaceAll({
        string: $('p').html(),
        search: '&nbsp;',
        replace: '<span class="red"> </span>'
    })
);

    The first two functions are just helper functions. Then I replace &nbsp; by a span, that’s it.

    Note that I used a normal space in the span, because then there is no problem with repeated execution. Otherwise you would wrap the &nbsp; with span tags each exection.

    The quick and dirty solution for the whole body: https://jsfiddle.net/y18e0c1w/7/