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
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

  • By
    Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

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!