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
    I&#8217;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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

  • By
    Add Site Screenshots for External Links Using MooTools Tooltips

    Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools. The MooTools JavaScript The first step is to grab...

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!