String Regular Expressions with MooTools

By  on  

Whether you like given JavaScript library or not , there are always snippets you can take from the code which accomplish a task you may need to address.  We all know that I looooooove MooTools, but maybe you're a Dojo or jQuery developer that doesn't get a good look at Moo.  The following are a choice selection of regular expression used with MooTools -- maybe you have use for them?

Clean Whitespace

var newString = myString.replace(/^\s+|\s+$/g, '');

Camel-Case a Dash-Separated String

var newString = myString.replace(/-\D/g, function(match){
	return match.charAt(1).toUpperCase();
});

Dash-Separate a Camel-Cased String

var newString = myString.replace(/[A-Z]/g, function(match){
	return ('-' + match.charAt(0).toLowerCase());
});

Escape a Regular Expression

var newString = myString.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');

Hex to RGB, RGB to Hex

var hex = myString.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
var newString = (hex) ? hex.slice(1).hexToRgb(array) : null;

Term Substitution

var newString = this.replace(regexp || (/\\?\{([^{}]+)\}/g), function(match, name){
	if (match.charAt(0) == '\\') return match.slice(1);
	return (object[name] != undefined) ? object[name] : '';
});

Strip Scripts from a String

var newString = myString.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(all, code){
	scripts += code + '\n';
	return '';
});

Above are just a sampling of regular expression used by MooTools to accomplish tasks.  Most, in fact, are applied as methods to the String native so they are available with *ANY* string!

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Pure CSS Slide Up and Slide Down

    If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so.  They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant.  One effect that is difficult to nail down with pure CSS is sliding up...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

Discussion

  1. Jeffrey

    Technologies will come and go – one library will find favor over the one you are currently using, one scripting language will arise that will make the one you are using look foolish, etc. But regular expressions are one of those things that will be a useful thing to know even on the tumultuous seas of techno-change.

    Good little article – make it a series. A cache of tested regular expressions to crib from is a useful thing to have.

    • Hear, hear!

      Perl was the first programming language I ever learned, so Regular Expressions have always been a primary tool I’ve used no matter the language. I just don’t know what I’d do without them!

      ^_^

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