String manipulation and regular expressions, part one

Notes from June 8, 2005 class

Waaaay back, when we were first learning about JavaScript objects, we spent a day working with the String object. We covered several String properties and methods, including:

You can review the class notes if you'd like a refresher on these basic String properties and methods.

Now, we get more complex. We'll cover four more methods of the String object: split(), match(), replace(), and search(). Simple enough, but to make best use of them, we'll have to learn about regular expressions, which JavaScript sticks into a RegExp object.

The split() method

Let's say we have this string of text:

var omar = "Wake! For the Sun, who scatter'd into flight; The Stars before him from the Field of Night; Drives Night along with them from Heav'n and strikes; The Sultan's Turret with a Shaft of Light."

and we want to put it into an array. We can use the split method, and pass in as the parameter the character that we want to indicate the separations. In this case, we'll just use the semicolons at the end of each line of the poem.

var rubaiyat = omar.split(';');

JavaScript will create an array. The first element in the array will be everything from the start of the string to the first semicolon, the second element will be everything between the first and second semicolons, and so on until the last element, which will be everything between the last semicolon and the end of the string. Of course, sooner or later we'd encounter a semicolon in the text itself and get messed up, which is why JavaScript gives us regular expressions--but we'll deal with that later.

This script uses split() to reverse the lines in the <textarea> element:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example 1</title>
<script language="JavaScript" type="text/javascript">
function splitAndReverseText(textAreaControl)
{

var textToSplit = textAreaControl.value;
var textArray = textToSplit.split('\r\n');
var numberOfParts = 0;
numberOfParts = textArray.length;
var reversedString = "";
var indexCount;

for (indexCount = numberOfParts - 1; indexCount >= 0; indexCount--)
{

reversedString = reversedString + textArray[indexCount];
if (indexCount > 0)

{

reversedString = reversedString + "\r\n";
// but only if for people using MSIE/Windows...
// for MSIE Mac, use: reversedString = reversedString + "\r";
// for Unix or for for Netscape/Mozilla version 6+, use this:
// reversedString = reversedString + "\n";

}

}
textAreaControl.value = reversedString;

}
</script>
</head>
<body>
<form name="form1" id="form1"><textarea rows="20" cols="40" name="textarea1" wrap="soft">Line 1
Line 2
Line 3
Line 4</textarea>
<br />
<input type="button" value="Reverse Line Order" name="buttonSplit" onclick="splitAndReverseText(document.form1.textarea1)" />
</form>
</body>
</html>

Wanna see it work? I've created separate versions for Internet Explorer/Windows, for Internet Explorer/Mac, and for Linux/Unix/all versions of Mozilla/Firefox.

The replace() method

Continuing the literary theme to 1984, think how much easier Winston Smith's job would have been if he'd had access to JavaScript.

var myForeverEnemy="We have always been at war with Oceana";
myAlwaysEnemy=myForeverEnemy.replace("Oceana","Eastasia");

Voila! In this example, though, the value of myForeverEnemy isn't even changed. Instead, the replace() method just replaces the enemy and puts it into a new string, myAlwaysEnemy. In the novel 1984, though, the Ministry of Truth would've obliterated all mention of anything but peace with Oceana, so they'd likely have overwritten the variable rather than creating a new one.

The search() method

The search() method searches a string for a particular piece of text. If the text is found, the character position where it was found is returned. If it's not found, the value -1 is returned. So far, that's no different from the indexOf() method we already know, but search() will be much more powerful when we use it with regular expressions in a bit.

The match() method

The match() method searches and returns each matched item, putting them into an array. Using this along with regular expressions gives you a nice tool for sifting through data.

Regular Expressions

After all this blather about RegExp, you're probably waiting to see what it can do.

var myRegExp = /\b'|\b/;

There, that was clear, right? Well, you can also do it like this:

var myRegExp = new RegExp("\\b'|'\\b");

What? Still not obvious?

The above were just two different ways to create a RegExp object. In the first example, which was a regular expression literal, the forward slashes (/) show JavaScript the beginning and end of a regular expression. The second example used a RegExp constructor function, which you'd use if you wanted to determine the regular expression at runtime.

Here's some code from the book, page 298:

<HTML>
<BODY>
<SCRIPT language="JavaScript" type="text/JavaScript">
var myString = "Paul, Paula, Pauline, paul, Paul";
var myRegExp = /Paul/;
myString = myString.replace(myRegExp, "Ringo");
alert(myString);
</SCRIPT>
</BODY>
</HTML>		 <HTML>
<BODY>
<SCRIPT language="JavaScript" type="text/JavaScript">
var myString = "Paul, Paula, Pauline, paul, Paul";
var myRegExp = /Paul/gi;
// g looks for all matches
// i makes the pattern case-insensitive
myString = myString.replace(myRegExp, "Ringo");
alert(myString);
</SCRIPT>
</BODY>
</HTML>
Try the script . It only replaces the first instance of "Paul" in the string. By default, the RegExp object only looks for the first matching pattern, then it stops. Try the script. The results look awful, but the RegExp has done precisely what we told it to do.

You'll note that in the script on the right, after the closing slash in a RegExp, you can add single letters that affect how the contents of the RegExp are handled:

Special characters:

Check the chart on page 300. It shows special characters we can designate within regular expressions, thus letting us do things like finding whether a word is joined to other characters instead of just joined to spaces or punctuation or just the start or end of a string.

Special characters
Character Meaning
[xyz]

A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen.

For example, [abcd] is the same as [a-c]. They match the 'b' in "brisket" and the 'c' in "ache".

[^xyz]

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen.

For example, [^abc] is the same as [^a-c]. They initially match 'r' in "brisket" and 'h' in "chop."

[\b]

Matches a backspace. (Not to be confused with \b.)

\b

Matches a word boundary, such as a space. (Not to be confused with [\b].)

For example, /\bn\w/ matches the 'no' in "noonday"; /\wy\b/ matches the 'ly' in "possibly yesterday."

\B

Matches a non-word boundary.

For example, /\w\Bn/ matches 'on' in "noonday", and /y\B\w/ matches 'ye' in "possibly yesterday."

\cX

Where X is a letter from A - Z. Matches a control character in a string.

For example, /\cM/ matches control-M in a string.

\d

Matches a digit character. Equivalent to [0-9].

For example, /\d/ or /[0-9]/ matches '2' in "B2 is the suite number."

\D

Matches any non-digit character. Equivalent to [^0-9].

For example, /\D/ or /[^0-9]/ matches 'B' in "B2 is the suite number."

\f

Matches a form-feed.

\n

Matches a linefeed.

\r

Matches a carriage return.

\s

Matches a single white space character, including space, tab, form feed, line feed. Equivalent to [ \f\n\r\t\u00A0\u2028\u2029].

For example, /\s\w*/ matches ' bar' in "foo bar."

\S

Matches a single character other than white space. Equivalent to [^ \f\n\r\t\u00A0\u2028\u2029].

For example, /\S/\w* matches 'foo' in "foo bar."

\t

Matches a tab.

\v

Matches a vertical tab.

\w

Matches any alphanumeric character including the underscore. Equivalent to [A-Za-z0-9_].

For example, /\w/ matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."

\W

Matches any non-word character. Equivalent to [^A-Za-z0-9_].

For example, /\W/ or /[^$A-Za-z0-9_]/ matches '%' in "50%."

From the above, we learn that in a designated RegExp, you can use \d to mean any digit from 0 to 9. So, if you want to make sure a phone number goes in in only this format: 1-800-555-1212, the regular expression is

\d-\d\d\d-\d\d\d-\d\d\d\d

Repetition characters:

{n} matches n of the previous item, so...

z{2} will match zz

--------

{n,} matches n or more of the previous item, so...
z{2,} will match zz, zzz, zzzz, zzzzz, etc.

--------

{n,m} matches at least n and at most m of the previous item, so...
z{2,4} will match zz, zzz, zzzz.

--------

? matches the previous item zero or one times, so...
z? matches nothing or z

--------

+ matches the previous item one or more times, so...
z+ matches z, zz, zzz, zzzz, zzzzz, etc.

--------

* matches the previous item zero or more times, so...
z* matches nothing, or z, zz, zzz, zzzz, zzzzz, etc.

So, if you want to make sure a phone number goes in in only this format: 1-800-555-1212, you can always check the regular expression:

\d-\d\d\d-\d\d\d-\d\d\d\d

but it'd be much easier to check for this:

\d-\d{3}-\d{3}-\d{4}

declared as a regular expression like this:

var checkPhone = /\d-\d{3}-\d{3}-\d{4}/

Repetition characters
Character Meaning
*

Matches the preceding item 0 or more times.

For example, /bo*/ matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".

+

Matches the preceding item 1 or more times. Equivalent to {1,}.

For example, /a+/ matches the 'a' in "candy" and all the a's in "caaaaaaandy".

?

Matches the preceding item 0 or 1 time.

For example, /e?le?/ matches the 'el' in "angel" and the 'le' in "angle."

If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).

Also used in lookahead assertions, described under (?=), (?!), and (?:) in this table.

{n}

Where n is a positive integer. Matches exactly n occurrences of the preceding item.

For example, /a{2}/ doesn't match the 'a' in "candy," but it matches all of the a's in "caandy," and the first two a's in "caaandy."

{n,}

Where n is a positive integer. Matches at least n occurrences of the preceding item.

For example, /a{2,} doesn't match the 'a' in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy."

{n,m}

Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding item.

For example, /a{1,3}/ matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.

Position characters

Position characters let you specify whre the match should start and end, or what will be on either side of the character pattern.

^ start of string, or beginning of line in a multi-line string
$ end of string, or the end of line in a multi-line string
\b matches a word boundary: the point between a word character (letters, digits, underscores) and a non-word character (symbols, spaces, commas, etc.)
\B matches a position that is NOT a word boundary

^myPattern will match if myPattern is at the beginning of a line.
myPattern$ matches if myPattern is at the end of a line.

Position characters
Character Meaning
\

For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.

For example, /b/ matches the character 'b'. By placing a backslash in front of b, that is by using /\b/, the character becomes special to mean match a word boundary.

-or-

For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.

For example, * is a special character that means 0 or more occurrences of the preceding character should be matched; for example, /a*/ means match 0 or more a's. To match * literally, precede the it with a backslash; for example, /a\*/ matches 'a*'.

^

Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.

For example, /^A/ does not match the 'A' in "an A", but does match the first 'A' in "An A."

$

Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.

For example, /t$/ does not match the 't' in "eater", but does match it in "eat".

Now that we know some special characters, we can fix that pesky code from earlier:

<HTML>
<BODY>
<SCRIPT language="JavaScript" type="text/JavaScript">
var myString = "Paul, Paula, Pauline, paul, JeanPaul, Paul";

var myRegExp = /Paul\W/gi;
// g looks for all matches
// i makes the pattern case-insensitive
/* That \W replaces the string Paul only where it's followed by a non-word character, which should be good. We shouldn't get Ringoa or Ringoine this time. BUT... since the commas match the non-word character, they're getting replaced, too. The last Paul isn't replaced because there's no character after it. */

myString = myString.replace(myRegExp, "Ringo");
alert(myString);
</SCRIPT>
</BODY>
</HTML>

 <HTML>
<BODY>
<SCRIPT language="JavaScript" type="text/JavaScript">
var myString = "Paul, Paula, Pauline, paul, JeanPaul, Paul";

// var myRegExp = /Paul\b/gi;
/* the \b (word boundary) fixes it so we only replace instances of "Paul" that are followed by a word boundary--in other words, that aren't followed by a letter in this case. Since the commas count as a word boundary, they're not grabbed in the RegExp, so they're left alone, and the last Paul is followed by a word boundary (the end of the string), so it gets changed, too.*/
// but, this gives us JeanRingo.

myString = myString.replace(myRegExp, "Ringo");
alert(myString);
</SCRIPT>
</BODY>
</HTML>
Try this script. Try this script.

<HTML>
<BODY>
<SCRIPT language="JavaScript" type="text/JavaScript">
var myString = "Paul, Paula, Pauline, paul, JeanPaul, Paul";

var myRegExp = /\bPaul\b/gi;
// now we put a word boundary in front of, and behind, "Paul"

myString = myString.replace(myRegExp, "Ringo");
alert(myString);
</SCRIPT>
</BODY>
</HTML>

Hooray! It works!

Big table of all sorts of special characters

Character Meaning
\

For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.

For example, /b/ matches the character 'b'. By placing a backslash in front of b, that is by using /\b/, the character becomes special to mean match a word boundary.

-or-

For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.

For example, * is a special character that means 0 or more occurrences of the preceding character should be matched; for example, /a*/ means match 0 or more a's. To match * literally, precede the it with a backslash; for example, /a\*/ matches 'a*'.

^

Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.

For example, /^A/ does not match the 'A' in "an A", but does match the first 'A' in "An A."

$

Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.

For example, /t$/ does not match the 't' in "eater", but does match it in "eat".

*

Matches the preceding item 0 or more times.

For example, /bo*/ matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".

+

Matches the preceding item 1 or more times. Equivalent to {1,}.

For example, /a+/ matches the 'a' in "candy" and all the a's in "caaaaaaandy".

?

Matches the preceding item 0 or 1 time.

For example, /e?le?/ matches the 'el' in "angel" and the 'le' in "angle."

If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).

Also used in lookahead assertions, described under (?=), (?!), and (?:) in this table.

.

(The decimal point) matches any single character except the newline character.

For example, /.n/ matches 'an' and 'on' in "nay, an apple is on the tree", but not 'nay'.

(x)

Matches 'x' and remembers the match. These are called capturing parentheses.

For example, /(foo)/ matches and remembers 'foo' in "foo bar." The matched substring can be recalled from the resulting array's elements [1], ..., [n] or from the predefined RegExp object's properties $1, ..., $9.

(?:x)

Matches 'x' but does not remember the match. These are called non-capturing parentheses. The matched substring can not be recalled from the resulting array's elements [1], ..., [n] or from the predefined RegExp object's properties $1, ..., $9.

x(?=y)

Matches 'x' only if 'x' is followed by 'y'. For example, /Jack(?=Sprat)/ matches 'Jack' only if it is followed by 'Sprat'. /Jack(?=Sprat|Frost)/ matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.

x(?!y)

Matches 'x' only if 'x' is not followed by 'y'. For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point.

/\d+(?!\.)/.exec("3.141") matches 141 but not 3.141.

x|y

Matches either 'x' or 'y'.

For example, /green|red/ matches 'green' in "green apple" and 'red' in "red apple."

{n}

Where n is a positive integer. Matches exactly n occurrences of the preceding item.

For example, /a{2}/ doesn't match the 'a' in "candy," but it matches all of the a's in "caandy," and the first two a's in "caaandy."

{n,}

Where n is a positive integer. Matches at least n occurrences of the preceding item.

For example, /a{2,} doesn't match the 'a' in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy."

{n,m}

Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding item.

For example, /a{1,3}/ matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.

[xyz]

A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen.

For example, [abcd] is the same as [a-c]. They match the 'b' in "brisket" and the 'c' in "ache".

[^xyz]

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen.

For example, [^abc] is the same as [^a-c]. They initially match 'r' in "brisket" and 'h' in "chop."

[\b]

Matches a backspace. (Not to be confused with \b.)

\b

Matches a word boundary, such as a space. (Not to be confused with [\b].)

For example, /\bn\w/ matches the 'no' in "noonday"; /\wy\b/ matches the 'ly' in "possibly yesterday."

\B

Matches a non-word boundary.

For example, /\w\Bn/ matches 'on' in "noonday", and /y\B\w/ matches 'ye' in "possibly yesterday."

\cX

Where X is a letter from A - Z. Matches a control character in a string.

For example, /\cM/ matches control-M in a string.

\d

Matches a digit character. Equivalent to [0-9].

For example, /\d/ or /[0-9]/ matches '2' in "B2 is the suite number."

\D

Matches any non-digit character. Equivalent to [^0-9].

For example, /\D/ or /[^0-9]/ matches 'B' in "B2 is the suite number."

\f

Matches a form-feed.

\n

Matches a linefeed.

\r

Matches a carriage return.

\s

Matches a single white space character, including space, tab, form feed, line feed. Equivalent to [ \f\n\r\t\u00A0\u2028\u2029].

For example, /\s\w*/ matches ' bar' in "foo bar."

\S

Matches a single character other than white space. Equivalent to [^ \f\n\r\t\u00A0\u2028\u2029].

For example, /\S/\w* matches 'foo' in "foo bar."

\t

Matches a tab.

\v

Matches a vertical tab.

\w

Matches any alphanumeric character including the underscore. Equivalent to [A-Za-z0-9_].

For example, /\w/ matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."

\W

Matches any non-word character. Equivalent to [^A-Za-z0-9_].

For example, /\W/ or /[^$A-Za-z0-9_]/ matches '%' in "50%."

\n

Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).

For example, /apple(,)\sorange\1/ matches 'apple, orange', in "apple, orange, cherry, peach." A more complete example follows this table.

\0

Matches a NUL character. Do not follow this with another digit.

\xhh

Matches the character with the code hh (two hexadecimal digits)

\uhhhh

Matches the character with code hhhh (four hexadecimal digits).

Check this code from page 301, checking a passphrase for alphanumeric characters.

Here's the code from page 312, splitting the fruit string.

And, from page 315, we replace single quotes with double quotes.

And finally, from page 319, we split a string of HTML into its component parts.