Fix Anchor URLs Using MooTools 1.2

By  on  

The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to include the "http://" when add links into their content. Essentially, they end up with links that look like:

	<a href="www.davidwalsh.name">Click here</a>

Obviously, that's a problem. Luckily MooTools 1.2 provides a quick fix for that problem for website users.

The MooTools 1.2 Code

window.addEvent('domready', function() {
	$('fix-links').addEvent('click', function() {
		$$('a[href^=www.]').each(function(el) {
			el.set('href','http://www.' + el.get('href').split('www.')[1]);
		});
		alert('Links fixed.');
	});
});

The above solutions is NOT the best solution because it doesn't correct what the search engines see. Have a PHP solution? Submit it! The best solution is to fix the link within the FCKEditor plugin at the time the user adds the link. The code above, however, will buy you a little time to go in and fix any existing errant links.

Recent Features

  • By
    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...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    WordPress-Style Comment Controls Using MooTools or jQuery

    WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery. The XHTML Notice that we place the links into...

  • By
    Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

Discussion

  1. Steinmann

    We are using FCKEditor, and it adds the http part automatically.

    We do have a php domparser that goes thru the whole thing fixing other things tho. Like adding lytebox links to some images etc…

  2. Does Mootools implement the CSS not() selector? If so, then you can use $$('a:not([^=http]').each...

    Good tip!

  3. Jordan

    @Eric Wendelin: That wouldn’t be ideal in a case where the link is meant to be relative.

  4. Caleb

    If there’s a way, it’d be great to have the Javascript check for url errors, and if it finds any, it’ll post the info to a php script, changing the url(s) permanently. I’ve been trying to create a script like that.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!