Week 06: Lecture – Forms + Strings

Lecture Demo Files

Lecture Demo: Start
Lecture Demo: Middle
Lecture Demo: End

This Week’s Assignment

WEB150 JS Library

I’ve created a javascript library for this class to use: web150 library. You may hotlink directly from this site:

<!-- load the library file for WEB150 -->
<script type="text/javascript" src="http://ipirates.net/web150/lib.web150.js"></script>

String Basics

Quirksmode says it best

Regular Expressions

Regular Expressions are a construct for finding and capturing parts of a string which match a given pattern. They can be very simple or exceedingly complex. Regular Expressions (AKA RegEx) are a universal construct that you will find in almost every programming language. They can be greatly useful but because of the high learning curve in using them effectively, they can also be quite dangerous. Sometimes a regular expression will look like it works for what you want but it may fail in cases you don’t expect.

Test expressions here: http://ioctl.org/jan/test/regexp.htm

In the reading section at the end of the lecture you will find a tutorial on Regular Expressions. Here is quick reference guide to Regular Expressions.

regex.test( string )

Tests the passed string against the regular expression for a match. Returns true or false.

var regex = /javascript/i;
var text = "javascript Demystified by Jim Keogh";
var found = regex.test(text);

string.match( regexp )

Returns an array containing the results of the match. This method searches string for one or more of regexp. When the flag “g” appears at the end of the regexp, the match() method does a global search, searching string for all matching substrings. It returns null if no match is found, while it returns an array if one or more matches are found. For example:

// return [ "1", "2", "3" ];
"1 plus 2 equals 3".match(/\d+/g);

When the flag “g” does not appear at the end of the regexp, the match() method searches string for a single match. If a match is found an array with a single element is return, if not the value null is returned.

// return [ "1"];
"1 plus 2 equals 3".match(/\d+/);

string.replace( regexp, replacement )

Performs a search-and-replace operation on string. if searches string for one or more substring that match regexp and replaces them with replacement. If regexp has the global “g” flag specified, the replace() method replaces all matching substrings. Otherwise, it replaces only the first matching substring.

var text = "javascript Demystified by Jim Keogh";
// ensures correct capitalization of "JavaScript"
var cleanText = text.replace(/javascript/i, "JavaScript");

string.search( regexp )

Looks for a substring matching regexp within string and returns the first character of the first matching substring, or -1 if no match was found.

// return 0;
"JavaScript is fun".search(/JavaScript/);
 
// return -1;
"JavaScript is fun".search(/javascript/); 
 
// notice 2 examples are case sensitive

string.split( delimiter, limit )

Creates and returns an array of as many as limit substrings of the specified string. These substrings are created by searching the string from start to end for text that matches delimiter and breaking the string before and after that matching text. The delimiting text is not included in any of the returned substrings, unless delimiter is a regex that contains parenthesized subexpressions.

// return ["I", "am", "a", "JavaScript", "Hacker"];
"I am a JavaScript Hacker".split(" ");
 
// return ["I", "am"];
"I am a JavaScript Hacker".split(" ", 2);
 
// return ["I", "m", "JavaScript Hacker"];
"I am a JavaScript Hacker".split(/\s+a/g);

Validation

Email

You will find gobs and gobs of different regular expressions online for validating emails. Some of them are way longer or more complex than they need to be, others are just plain wrong. It’s much simpler than people expect–and you can easily choose what you want to support in RFC compliance.
After many years of dealing with email validation, I have come up with the following regular expression (with documentation to show what it supports and what it does not support). Feel free to use this in your own code, just leave the comment block intact so you always will know where it came from (to look for an update in the future, just search google for the codesnippitID):

  /**
    * validEmail checks for a single valid email
    *
    * supported RFC valid email addresses:
    * a@a.com
    * A_B@A.co.uk
    * abc.123@a.net
    * 12+34-5+1=42@a.org
    * adam&lena@a.co.uk
    * root!@a_b.com
    * _______@a-b.la
    * %&=+.$#!-@a.com
    *
    * Current known unsupported (but are RFC valid):
    * abc+mailbox/department=shipping@example.com
    *  !#$%&'*+-/=?^_`.{|}~@example.com (all of these characters are RFC compliant)
    * "abc@def"@example.com (anything goes inside quotation marks)
    * "Fred \"quota\" Bloggs"@example.com (however, quotes need escaping)
    *
    * @param string email The supposed email address to validate
    * @return bool valid
    * @author Adam Eivy
    * @version 2.0
    * @codesnippitID bcd71ab9-dc05-45af-9855-abb57c0cf0ab
    */
   function validEmail(email){
       var re = /^[\w.%&=+$#!-]+@[\w.-]+\.[a-zA-Z]{2,4}$/;
       return re.test(email);
   };

Forms

Rather than rewrite a fairly complete article, I’m just going to point you to Quirksmode!
Quirksmode on Forms
Alternative solutions using document.getElementById() will be presented as we progress through Quirksmode page.

Intellectual Pirates