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.
• attributes: 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.
• checkTags: should the class look for bad tags?
• checkAttributes: should the class look for bad attributes?
• checkMoo: should the class look for "on" event attributes?
• custom: 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!