MooTools HTML Police: dwMarkupMarine

By David Walsh on October 8, 2008

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.

View Demo Download

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'
	}); 
});

View Demo Download

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

Recent Features

By David WalshMay 6, 2015

I’m an Impostor

This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...

By Landon SchroppApril 14, 2014

Write Better JavaScript with Promises

You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

By David WalshAugust 4, 2008

MooTools 1.2 Image Protector: dwProtector

Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

By David WalshSeptember 19, 2011

Introducing MooTools Templated

One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Discussion

Adam Taylor

I think this could be a great class to add on to a CMS. Specifically when your clients are updating the site – If the preview showed invalid markup to be ugly as sin then the client might think twice.

David – amazing work!!!

Eric Wendelin

If only we had a “virus” that could run this on all web pages. Ahhh, the day.

Jesus DeLaTorre

I think Adam, hit it right on the head. This would be awesome for a CMS. You should make the ‘bad’ class a little bit more bad, maybe something like magenta with flashing text.

philip

i love mootools, but why use JavaScript when you can just use CSS to achieve the same goal?

Check out Eric Meyer’s Diagnostic CSS file: http://meyerweb.com/eric/tools/css/diagnostics/index.html

Sean McArthur

One tag I found sorely missing is embed. Everyone seems to think the way to put flash in is use the embed tag, but its useless and invalid!

Ryan

You could use this as a bookmarklet too. That’s be neat.

david

@Philip: I created this using MooTools because I have future aspirations for it, like having a “correct” method that would, for example, replace [b] tags with [strong] tags.

philip

@david: that would be pretty cool. :)