Bookmarklet to Remove Zero-width Spaces (​) from SharePoint Pages

— Web Design & Development

When editing pages in SharePoint, the rich text editor inserts zero-width spaces to assist with text selection. Unfortunately it does not always remove these when a page is saved. These characters appear as ​ in Chrome’s dev tools, for example. These “leftovers” can cause spacing issues for content authors, so we created a bookmarklet to remove these when editing a page. The instructions for this may vary based on your browser, but the general idea is the same:

  1. Add a new bookmark to your bookmarks bar (in Chrome, right-click and select “Add Page”)
  2. Give it a descriptive name such as “Remove ​”
  3. For the URL, use javascript:;(function(e){var t=String.fromCharCode(8203);e("body").find(":not(iframe)").contents().filter(function(){return this.nodeType===3&&this.nodeValue.indexOf(t)!==-1}).each(function(){var n=e(this)[0].nodeValue;var r=new RegExp(t,"g");e(this)[0].nodeValue=n.replace(r,"")});alert("Zero-width spaces have been removed.")})(jQuery);

Now when you click that bookmark, it executes the JavaScript code and removes the zero-width spaces. Note that this code assumes that jQuery is loaded on the page.

To use this with maximum effectiveness, click this button right before you save changes to a page every time you edit a page.