MooTools HTML Police: dwMarkupMarine

We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in. dwMarkupMarine is a small MooTools plugin you can bring into those awful pages to help highlight the mistakes you need to correct.

The MooTools 1.2 JavaScript

var dwMarkupMarine = new Class({ //implements Implements: [Options], //options options: { tags: 'b, i, u, font, basefont, center, applet, dir, isindex, menu, s, strike, layer, xmp', attributes: 'caption[align!=""], iframe[align!=""], image[align!=""], input[align!=""], object[align!=""], legend[align!=""], table[align!=""], hr[align!=""], div[align!=""], p[align!=""], h1[align!=""], h2[align!=""], h3[align!=""], h4[align!=""], h5[align!=""], h6[align!=""], body[alink!=""], body[background!=""], table[bgcolor!=""], tr[bgcolor!=""], td[bgcolor!=""], th[bgcolor!=""], img[border!=""], object[border!=""], br[clear!=""], *[compact!=""], td[height!=""], tr[height!=""], *[hspace!=""], script[language!=""], body[link!=""], hr[noshade!=""], td[nowrap!=""], th[nowrap!=""], isindex[prompt!=""], hr[size!=""], *[start!=""], li[type!=""], ol[type!=""], ul[type!=""], li[value!=""], body[vlink!=""], *[vspace!=""], hr[width!=""], td[width!=""], th[width!=""], pre[width!=""]', mootools: '*[onblur!=""], *[onclick!=""], *[ondblclick!=""], *[onfocus!=""], *[onkeydown!=""], *[onkeypress!=""], *[onkeyup!=""], *[onload!=""], *[onmouseover!=""], *[onmousedown!=""], *[onmouseup!=""], *[onmouseout!=""], *[onmousemove!=""], *[onselect!=""], *[onsubmit!=""], *[onunload!=""]', checkTags: true, checkAttributes: true, checkMoo: true, custom: [], weapon: 'bad' }, //initialization initialize: function(options) { this.setOptions(options); this.search(); }, //a method that does whatever you want search: function() { if(this.options.checkTags) { this.beat(this.options.tags); } if(this.options.checkAttributes) { this.beat(this.options.attributes); } if(this.options.checkMoo) { this.beat(this.options.mootools); } if(this.options.custom) { this.beat(this.options.custom); } }, //tag the baddies beat: function(collection) { $$(collection).each(function(el) { el.addClass(this.options.weapon); }.bind(this)); } });

Here are the class options:

tags : a string of HTML tags to look for.

: a string of HTML tags to look for. attributes : a string of element/attribute combinations to look for.

: a string of element/attribute combinations to look for. mootools : a string of "on" events to look for. You're using Moo -- there's no need for those.

: a string of "on" events to look for. You're using Moo -- there's no need for those. checkTags : should the class look for bad tags?

: should the class look for bad tags? checkAttributes : should the class look for bad attributes?

: should the class look for bad attributes? checkMoo : should the class look for "on" event attributes?

: should the class look for "on" event attributes? custom : a string of custom selectors to look for.

: a string of custom selectors to look for. weapon : class to tag onto matches.

The Moo 1.2 Usage

//make it happen! window.addEvent('load',function() { var mm = new dwMarkupMarine({ weapon: 'bad' }); });

Do you have any use for this? Any ideas for improvement? Share them!