Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Run this in the devtools console on a SharePoint 2010 page when in edit mode, to strip out quite a lot of spurious crap from the HTML.
/*
Run this in the devtools console on a SharePoint 2010 page when in edit mode, to strip out quite a lot of spurious crap from the HTML.
*/
(function($, window, document) {
var $editables = $("[contenteditable], input[type='hidden'][id*='hiddenStorage'], input[type='hidden'][id*='hiddenDisplay'], input[type='hidden'][id^='ctl00'][id$='content']"),
originalHTML,
filterHTML,
$el,
$filterHTML,
$removeElements,
elType;
$editables.each(function (i, el) {
$el = $(el);
elType = $el[0].tagName.toLowerCase();
originalHTML = '';
// It'll be an input or a div...
if (elType === 'div') {
originalHTML = $el.prop('outerHTML');
} else {
originalHTML = "<div>" + $el.val() + "</div>";
}
filterHTML = originalHTML;
// Strip out zero width spaces - see http://stackoverflow.com/a/11305926/13019
filterHTML = filterHTML.replace(/[\u200B-\u200D\uFEFF]/g, '');
// Strip out bad HTML classes
$filterHTML = $(filterHTML);
// Work around side effect - SharePoint WYSIWYG can break with empty <td> elements
$filterHTML.find("td:empty").each(function() {
$(this).text("\u200B");
});
// Filter out legacy table styles
$filterHTML.find("[class*='ms-rteTable']").removeAttr("class");
$filterHTML.find("[class*='sbgTable']").removeAttr("class");
// Remove crappy style attributes
$filterHTML.find("[style]").removeAttr("style");
// Remove spurious rubbish
$filterHTML.find("[rowspan='1']").removeAttr("rowspan");
$filterHTML.find("[colspan='1']").removeAttr("colspan");
$filterHTML.find("[_moz_resizing]").removeAttr("_moz_resizing");
$filterHTML.find("[_moz_abspos]").removeAttr("_moz_abspos");
// Remove empty elements
$filterHTML
.find("div, p, br")
.not("[fragmentid] *, [fragmentid]")
.filter(":empty, br:last-child")
.remove();
// Remove whitespace-only elements
$filterHTML
.find("div, p, br")
.not("[fragmentid] *, [fragmentid]")
.filter(function() {
return ! $.trim($(this).text());
})
.remove();
// Remove useless span elements added by the RTE and not cleaned up
$filterHTML
.find("span")
.filter(function() {
return $(this)[0].attributes.length === 0;
})
.each(function(i, el) {
$(el).replaceWith($(el).html());
});
filterHTML = $filterHTML.html();
if (originalHTML === filterHTML) {
console.info("No changes made.");
} else {
console.warn("Made changes!");
console.log("B: " + originalHTML);
console.log("A: " + filterHTML);
}
// It'll be an input or a div...
if (elType === 'div') {
$el.html(filterHTML)
} else {
$el.val(filterHTML);
}
});
} (window.jQuery, window, document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.