A Concise Introduction to JavaScript
Part I: The Core Language

Copyright ©2002, ©2007 by David Matuszek

JavaScript is a language used in HTML (Web) pages, and understood by most Web browsers, to add interactivity to Web pages.

JavaScript has been largely standardized by ECMA (the European Computer Manufacturers Association) as a language formally named ECMAScript v3, usually known as JavaScript 1.5 (or ActionScript, JScript, QtScript, JScript .NET, DMDScript, or InScript). All modern browsers implement EMCAScript v3 reasonably well, with possibly some omissions and errors, and most browers add features of their own. In this paper I attempt to discuss primarily platform-independent features, but make no attempt to keep track of what doesn't work in various browsers.

Because JavaScript is used almost exclusively in Web pages, it cannot access files and has very limited networking capabilities. The only graphics capability it has is the ability to create HTML programmatically.

My main resources in writing this paper are the two excellent books, JavaScript: The Definitive Guide, by David Flanigan, and JavaScript: The Good Parts, by Douglas Crockford, both published by O'Reilly.

Quick Links
Data types Operators Objects
Identifiers Expressions Arrays
Comments Statements Strings
Variable declarations Functions Regular expressions
Part II: Client-Side JavaScript


Data types

JavaScript has three primitive types: number, string, and boolean, and two special values, null and undefined. Everything else is an object. An array is a type of object.

A number may be written as an integer or as a real number; however written, numbers are stored as floating-point. Special predefined numbers include Infinity, NaN ("not a number"), Number.NaN (same as NaN), Number.MIN_VALUE, Number.MAX_VALUE, Number.NEGATIVE_INFINITY, and Number.POSITIVE_INFINITY (same as Infinity). A hexadecimal literal begins with 0x or 0X. A nonzero number should never be written with a leading zero (e.g. 0123), because some implementations will treat this as an octal number and others won't.

A string is a sequence of zero or more characters enclosed in either single quotes ('hello') or double quotes ("hello"). There is no "character" data type. Special characters are:

\0  NUL       \r  carriage return       \'  single quote
\b  backspace
\t  horizontal tab
\"  double quote
\f  form feed
\v  vertical tab
\xDD  Unicode hex DD
\n  newline
\\  backslash
\xDDDD  Unicode hex DDDD

A boolean has one of two values: true or false. When other values are converted into boolean (typically, for use as a test), the values 0, "0", the empty string, undefined, null, and NaN are converted to false, and other values are converted to true.

An object is a collection of named values, called its properties. If the name of a property is known to the programmer, it can be referenced by the syntax object.property_name, for example, image.width. If the name can be computed, it can be referenced by the syntax object[expression], for example, image["width"].

The special value null is an object with no properties. A similar value, undefined, means that the variable has never been assigned a value or that the requested property does not exist.

Functions, arrays, regular expressions, errors, and dates are all special types of object. In addition, there are "wrapper" types Number, String, and Boolean, to allow object-like operations on primitive values; but JavaScript automatically converts between primitives and wrappers as needed, so the programmer almost never sees these wrapper types.


Identifiers

Identifiers consist of letters (as defined by Unicode), digits, underscores, and/or dollar signs; the first character may not be a digit. Case is significant in JavaScript but not in HTML; since JavaScript names are frequently used in HTML, this can lead to some strange errors if you are not careful about case. By convention, the names of variables, properties, functions, and methods should begin with a lowercase letter; names of constructors should begin with a capital letter. Names may be any length.

The following are keywords in JavaScript, and may not be used as names. Italicized keywords are not currently in use, but are reserved for possible future extensions to the language.

abstract debugger  final instanceof  public transient 
boolean default finally int return true
break delete float interface short try
byte do for long static typeof
case double function native super var
catch else goto new switch void
char enum if null synchronized  volatile
class export implements  package this while
const extends import private throw with
continue  false in protected throws  


Comments

// introduces a comment that extends to the end of the line. Multi-line comments start with /* and end with */. Inside a comment, // and /* have no special meaning (so you cannot "nest" comments). Inside a quoted string or regular expression, // and /* do not start a comment.


Variable declarations

JavaScript variables are untyped: any variable can hold any type of value.

Variables are declared with the keyword var, along with an optional initial value; for example, var x or var x = 5. Alternatively, a variable may be declared simply by assigning it a value, for example, x = 5. It is not an error to declare the same variable more than once.

If a variable has been declared but not assigned a value, it has the special value undefined; it is not necessarily an error to use this value. If a variable has never been declared, it is an error to try to use its value.

A variable that is declared by var within a function is local to that function, and can be used anywhere within the function (even above the point of declaration). A variable that is declared outside any function, or is declared by assignment only (without using the keyword var), is global and can be referenced from anywhere in the HTML document. The formal parameters to a function are treated as local variables. If a local variable has the same name as a global variable, the name refers to the local variable.

Where declared How declared Scope
Within a function As a formal parameter Local to the function
With var Local to the function
By assignment Global
Not within a function With var Global
By assignment Global

The only scopes in JavaScript are global and local to the function. A variable may be declared in a for statement, that is, for (var variable ...) ..., but its scope is still either global or local to the function.

Functions may be nested, that is, a function may be defined within (and local to) another function. A variable declared within nested functions is local to the immediately enclosing function. However, functions should not be declared inside an if statement; this is both illegal, and implemented differently in different browsers.

Variables are actually properties of an object. Global variables are properties of the global object. Function variables are properties of a short-lived call object.


Operators

Operator

Meaning

Position

Precedence

Associativity

function_name (args) Call the function postfix 15 left to right
array_name [index] Index into the array postfix 15 left to right
object . property The property of the object infix 15 left to right
new constructor Call the constructor prefix 15 right to left
! Boolean negation (true <--> false) prefix 14 right to left
~ Bitwise negation (change every bit) (avoid--see below)
prefix 14 right to left
++ Add one (do not use in expressions--see below)
prefix or postfix 14 right to left
-- Subtract one (do not use in expressions--see below) prefix or postfix 14 right to left
+ Unary plus (does nothing) prefix 14 right to left
- Unary minus (negation) prefix 14 right to left
delete Remove a property prefix 14 right to left
typeof Return data type prefix 14 right to left
void Return undefined prefix 14 right to left
* Multiply infix 13 left to right
/ Floating-point divide infix 13 left to right
% Remainder infix 13 left to right
+ Add (numbers) or concatenate (strings) infix 12 left to right
- Subtract infix 12 left to right
<< Shift bits left, vacated bits are set to zero (avoid--see below) infix 11 left to right
>> Shift bits right, vacated bits are set to sign bit (avoid--see below) infix 11 left to right
>>> Shift bits right, vacated bits are set to zero (avoid--see below) infix 11 left to right
< Less than infix 10 left to right
<= Less than or equal to infix 10 left to right
> Greater than infix 10 left to right
>= Greater than or equal to infix 10 left to right
instanceof Test type of left operand infix 10 left to right
in Test if property exists infix 10 left to right
== Equal to (avoid--intransitive, complex rules)
infix 9 left to right
!= Not equal to (avoid--intransitive, complex rules) infix 9 left to right
=== Strictly equal to infix 9 left to right
!== Not strictly equal to infix 9 left to right
& Bitwise AND (avoid--see below) infix 8 left to right
^ Bitwise exclusive OR (avoid--see below) infix 7 left to right
| Bitwise OR (avoid--see below) infix 6 left to right
&& Boolean AND infix 5 left to right
|| Boolean OR infix 4 left to right
cond ? expr1 : expr2 If cond is true then expr1, else expr2 double infix 3 right to left
= Assignment, "gets" infix 2 right to left
+= Addition assignment operator: a+=b is the same as a=a+b infix 2 right to left
-= Subtraction assignment operator infix 2 right to left
*= Multiplication assignment operator infix 2 right to left
/= Division assignment operator infix 2 right to left
%= Remainder assignment operator infix 2 right to left
&= Bitwise AND assignment operator (avoid--see below) infix 2 right to left
^= Bitwise exclusive OR assignment operator (avoid--see below) infix 2 right to left
|= Bitwise OR assignment operator (avoid--see below) infix 2 right to left
<<= Left shift assignment operator (avoid--see below) infix 2 right to left
>>= Right shift assignment operator sign extension (avoid--see below) infix 2 right to left
>>>= Right shift assignment operator, zero fill (avoid--see below) infix 2 right to left
, Multiple evaluation infix 1 left to right

Notes:

There is no such thing as an "integer divide" operation. 5/2 gives 2.5.

When used as a prefix, ++ adds one to its operand before using the value of the operand in an expression. When used as a suffix, ++ uses the original value of the operand in the enclosing expression, and adds one to the operand afterwards. Similar remarks hold for the -- operator. These operators should only be used as complete statements, or as the increment part of a for loop; other expressions are too confusing. For example, the statement x = x++ does nothing.

The bitwise operators (&, |, ^, ~, >>, >>>, <<) convert their operands to integers--a data type that JavaScript does not have--perform the operation, and convert back. This is very slow and the results cannot be trusted.

The boolean operators && and || are short-circuit operators; if the first operand of && is false, or the first operand of || is true, the second operand will never be evaluated. For example, in if(i < size && a[i] == 0)..., where size is the size of the array, the array will not be accessed if i is too large.

JavaScript automatically converts values to an appropriate type. For example, when a string is "added" to a number, the number is converted to a string and the two values are concatenated. When a string is multiplied by a number, JavaScript first tries to convert the string to a number. When a string or number is used as a test, it is automatically converted to a boolean. And so on.

JavaScript does not provide a coercion (casting) operator to explicitly convert a value to a given type.

Any value can be converted to its equivalent boolean value by preceding it with !!.

If the operands of == or != are of different types, JavaScript first tries to convert them to the same type. The rules are complex and confusing, so avoid these operators. If the operands of === or !== are of different types, they are considered to be unequal.

The comparisons <, <=, ==, ===, !==, >=, > can also be used with strings.

The various assignment operators are operators; that is, they have a value and may be embedded in a larger expression.

new constructor(arguments) creates a new object and calls a constructor function to initialize it. For new only (that is, not for any other kind of function call), if there are no arguments, the parentheses may be omitted.

delete attempts to remove the specified object property, variable, or array element, and returns true if successful. Variables declared with var cannot be deleted.

typeof gets the type of its operand and returns one of the following strings: "number", "string", "boolean", "object", "function", or "undefined".

void ignores its operand and returns undefined.

object instanceof constructor returns true if its lefthand operator is an object of the type created by its righthand operator (which must be the name of a constructor).

name in object returns true if the given object (which may be an array) has a property with the given name.

object . property returns the value of the property for the given object, or undefined if the object does not have that property. The property must be given as a simple identifier.


Expressions

An expression is any JavaScript code that results in a value. Expressions may be as simple as a single constant or single variable.

Operators with higher precedence (indicated by larger numbers) are performed before those with lower precedence. For example, in the expression 2*3+4*5, the multiplications are done before the addition, because multiplication has higher precedence than addition.

When operators have equal precedence, the associativity ("left to right," or "right to left") determines which operations are done first. For example, substraction has left to right associativity, so 10-5-3 means (10-5)-3 rather than 10-(5-3). Assignment has right to left associativity, so a=b=c+5 means a=(b=c+5) rather than (a=b)=c+5. Most common operators, other than the assignment operators, associate left to right.

Parentheses can be used to override the above rules and specify an explicit order of evaluation. Parentheses are also used to show the order of evaluation when it might not be obvious.


Statements

Statements are terminated by a semicolon or by the end of the line. Semicolons are required only to separate two or more statements on the same line. If a statement needs to extend over two lines, take care to separate it in a place where the first line cannot be understood as a complete statement.

Good: w = a + b +
    c + d
     Bad: w = a + b
  + c + d

Statement

Meaning

var name1, name2= value, name3; Declares a comma-separated list of variables, each of which may be given an initial value; the default value is undefined.
expression; Any expression may be used as a statement; however, unless the expression has a side effect, the computed value is simply discarded.
Example expressions that have side effects:
  a = b + c;
  i++;
  printf ("r = %d\n", r);
statements } The "compound" statement, used to group several statements into one.
if (expression) {
  statements;
}

Executes the compound statement if and only if the expression results in a value that is considered to be true.

If only a single (non-compound) statement is controlled, JavaScript does not require the braces. However, the braces should always be used, as protection against future bugs.

if (expression) {
  statements1;
} else {
  statements2;
}

Evaluates the expression and executes the first compound statement if the result is true, or executes the second compound statement if the result is false.

If only a single (non-compound) statement is controlled, JavaScript does not require the braces. However, the braces should always be used, as protection against future bugs.

while (expression) {
  statements;
}

Evaluates the expression and executes the statements if the result is true, then starts over.

If only a single (non-compound) statement is controlled, JavaScript does not require the braces. However, the braces should always be used, as protection against future bugs.

for (var in object) {
  statement;
}
Executes the loop body once for each user-defined property of the object, and some but not all properties of predefined JavaScript objects.

If only a single (non-compound) statement is controlled, JavaScript does not require the braces. However, the braces should always be used, as protection against future bugs.


do {
  statement
} while (expression);

Executes the statement, then evaluates the expression. Starts over if the expression results in a true value.

If only a single (non-compound) statement is controlled, JavaScript does not require the braces. However, the braces should always be used, as protection against future bugs.

In Netscape 4, the continue statement does not work correctly in this kind of loop.
for (expr1expr2expr3) {
  statement;
}

Evaluates the first expression just once, at the beginning. Thereafter, it:

  1. Evaluates the second expression. If the result is false, "falls through" to whatever follows the for statement.
  2. Executes the compound statement.
  3. Evaluates the third expression (which typically has a side effect that could modify the value of the second expression).
  4. Returns to step 1.

If only a single (non-compound) statement is controlled, the braces may be omitted. However, the braces should always be used, as protection against future bugs.

The statement and all expressions are optional; semicolons may not be omitted. If all expressions are omitted, the for statement behaves as an infinite loop.

switch (expression) {
  case value1 :
    statements1;
  case value2 :
    statements2;
  ...
  default :
    statementsN;
}

Each case in the switch statement can consist of multiple statements; braces may improve readability but are not necessary.

Whichever group of statements is selected by the switch statement, the computer will execute those statements and all remaining statements in the switch until a break is encountered; this is not what the programmer usually wants. A strongly recommended style is to use break as the last statement in every group of statements, including the last group If you deliberately omit a break, include a comment to that effect.

The default case of a switch statement is optional. If omitted, and no other case matches, the switch statement does nothing.

label: statement ; Any statement may be labeled, but it really only makes sense to label loop statements and switch statements. Labels are used in conjunction with the break and continue statements.
break; Exit the innermost enclosing loop or switch statement. Cannot be used outside a loop or switch statement.
break label; Exit the enclosing loop or switch statement with the given label. Cannot be used outside the labeled loop or switch statement.
continue; Return to the top of the innermost enclosing loop. Cannot be used except in a loop. [No specific problem, but code can almost always be improved by refactoring to remove the continue statement.]
continue label; Return to the top of the enclosing loop with the given label. Cannot be used outside the labeled loop.
throw expression; Signals an error or exception. The expression may be of any type.
try {
  statements1
} catch (argument) {
  statements2
}

Executes the first block of statements; if an exception occurs at any point during the execution, control immediately transfers to the catch block.

There may be multiple catch blocks; the format of each catch block (except possibly the last) is catch (argument if expression) {...}, where the block is executed if the expression is true. Only the first successful catch block will be executed.

All braces are required,even for single statements.

try {
  statements1
} catch (argument) {
  statements2
} finally {
  statements3
}

As above. In addition, the finally clause will be executed, regardless of what happens in the try or catch part.

For example, if the try part contains a return statement, the return action will be delayed until after the finally clause has executed.

with object
  statement
;
Use the object as the default prefix for variables in the statement. In order to control multiple statements, use braces to group the controlled statements into a compound statement. [avoid--unpredictable results]
function name (args) {
   // body
}
Defines a function.
return i; Evaluate the expression and return it as the value of the function.
return; Return from a function.
; The empty statement does nothing. Occasionally useful as the body of a loop.
label : any_statement Any statement can be given a label (name). However, labels are only useful on loops and switch statements (where they can be referenced by break or continue statements).


Functions

A function is a block of code that can be "invoked" (called). Functions in HTML should normally be defined in the <head> element, to ensure that they will be defined before they are needed. Functions may be recursive. Functions may be nested within other functions.

Example definition:
function average(x, y) {  // x and y are formal parameters
var sum; // this declares sum as a local variable
g = x; // this declares g as a global variable
sum = g + y;
return sum / 2;
}

Example call:

avg = average(5, 10);

Defining functions

The function square may be defined in any of these ways:

  1. function square(x) { return x * x; }
  2. var square = new Function("x", "return x * x;");
  3. var square = function(x) { return x * x; };
  4. var square = function sqr(x) { return x * x; };

(1) is a function statement. Function statements may be placed as top-level code in an HTML document, or as a top-level statement within another function. Function statements may not be enclosed in other kinds of statements, such as compound statements or loops. The word var is not used (except possibly in the function body).

(2) uses the Function() constructor. This constructor takes any number of string arguments; the last argument is the body of the function, and the preceding arguments are the formal parameters. Since the function body is given as a string, it is possible to use string methods to construct the function body.

(3) uses a function literal. Functions are first-class objects. That is, a function is a data value, and can be used like any other piece of data: assigned to variables, passed as parameters, etc. function(x) { return x * x; }; is an anonymous function literal, which in this example we assign to the variable square.

(4) is the same as (3), but with a temporary function name, sqr. Temporary function names are available only within the function body, where they can be used to invoke the function recursively; but the final result is still an anonymous function.

Functions may be defined within other functions, and are local to the enclosing function:

function hypotenuse(x, y) {
function square(x) { return x * x; }
return Math.sqrt(square(x) + square(y));
}

Functions are data

Functions may be assigned to variables:

var square2 = square;
  result = square2(25);
  
  myArray[10] = square;
  result = myArray[10](25); 
It is illegal to declare a function conditionally (inside an if statement).

Functions may be assigned to properties. A function assigned to a property is called a method. Within a method, this refers to the call object, that is to the object that holds the property.

  myRect = { width: 8,
height: 9,
area: function() { return this.height * this.width; }
}
document.write(myRect.area());

Functions may be passed as parameters:

myArray.sort(function(a,b) { return a - b; });

Functions can have properties:

myFunction.callCount = 0;
function myFunction() { myFunction.callCount++; ...whatever...; }

Miscellaneous facts about functions

Primitive values (number, string, boolean) are passed to a function by value; objects are passed by reference. As a result, changing the value of a parameter within a function does not change the value outside the function, but changing the properties of an object passed as a parameter does change their values outside the function.

Within a function body, arguments is a special object that holds the actual parameters that were passed to the function. While arguments is not really an array, you can use arguments.length to find out how many arguments the function was actually called with, and arguments[i] to access the ith argument. Using the elements of arguments has exactly the same effect as using the corresponding named arguments (if any). You can use arguments to write functions that take a variable number of arguments. In addition, arguments.callee refers to the function itself; this can be used to create anonymous recursive functions:

function(n) { return n <= 1 ? 1 : n * arguments.callee(n - 1); }

Both myFunction.call(myObject, arg0, ..., argN) and myFunction.apply(myObject, arg0, ..., argN) call myFunction as if it were a method of myObject; that is, this is set to myObject prior to execution.


Objects

Properties

Object have properties; properties have values. A property is basically a variable that is attached to an object. Properties may be added to or deleted from an object at any time.

If you know the name of a property, you can refer to it with dot notation: myObject.myProperty, owner.name, myCar.make. If you do not know the name of a property, but you can get it from a variable or expression, you can refer to it with bracket notation: teacher[course], teacher["CIT" + number].

Creating objects

You can create a new, "blank" object with:
     var myCar = new Object();

You can add fields to this object (or any other object) with:
     myCar.make = "Pontiac"; myCar.year = 1996;

You can create an object with an "object literal":
     var myCar = { make: "Pontiac", year: 1996 };

You can create an object with a constructor that you write:
     var myCar = Car("Pontiac", 1996);
where:
     function Car(m, y) { this.make = m; this.year = y; }

You should write a constructor if you want to define a number of similar objects. Within the constructor, the keyword this (which is required, not assumed) refers to the new object. By default, the constructor returns the newly created object this, but you can explicitly return some other object. When an object is created by calling a constructor, the test object instanceof constructor (for example, myCar instanceof Car) will return true. It is conventional to capitalize the names of constructors.

Object prototypes

Each JavaScript object belongs to a class, and each class has a prototype. The properties of an object belong to that object alone. If you want a property or function shared across all instances of a class, you need to attach them to the class prototype. Prototype properties are similar to static values and methods in Java.

For example, to ensure that every Car has four wheels, you might write:
     Car.prototype.wheelCount = 4;

You can attach a method to a single object like this:
     myCar.age = function() { return this.year - 2005; }

You can attach a method to all instances of a class like this:
     Car.prototype.age = function() { return this.year - 2005; }

You can attach a method to a class like this:
     Car.fuel = function() { return "gasoline"; }

The keyword this should not be used in a method that belongs to a class.

To read (get the value of) a property, say myObj.myProp, JavaScript first checks to see if the particular object myObj has the property, and if so, returns its value; otherwise, it checks to see if the object's prototype has the property. However, to write (set the value of) a property, JavaScript only examines the object itself; it does not use the object's prototype. To set the value of a property inherited from a prototype, you must refer to it explicitly, as for instance myObj.prototype.myProp.

Built-in classes, such as String and Date, also have prototypes, and you can assign new properties to them.

Every object inherits a toString() method from its prototype, to convert the object into a string, but the result usually isn't very useful. You can override toString() with a more useful version.


Arrays

An array is an object with some special features.

You can create an array (say, a) as follows:

Arrays are zero-based; a[0] is the first element, a[a.length - 1] is the last. All arrays have a length property, which is always one larger than the index of the last occupied location in the array. length is automatically kept up to date. You can set length to a different value: If you make it smaller, array elements are discarded, while if you make it larger, the new elements have the value undefined.

You can add elements to the array simply by assigning to them, for example, a[5000]=1;. Arrays are sparse: that is, array locations that are undefined do not take up space in the computer. Array indices must be in the range 0 to 232-1. You can delete elements from an array with the delete operator. Deleting elements does not change the length of the array, or change the locations of the remaining elements.

Array methods

join()
Converts all the elements of the array to strings and concatenates them, with a comma separator.
join(string)
Converts all the elements of the array to strings and concatenates them, using the given string as a separator.
reverse()
Reverses the elements of the array in place, that is, no new array is created.
sort()
Sorts the array in place, in alphabetical order.
sort(function)
Sorts the array in place. The function takes two arguments, and returns a negative number if the first element is judged "less than" the second, zero if the two elements are "equal," and a positive number if the first element should be considered "larger."
concat(arg1, ..., argN) or concat([arg1, ..., argN])
Creates and returns a new array with all the elements of the old array, and also the elements arg1, ..., argN.
slice(start, end)
Returns a new array consisting of elements start through end - 1 of the original array.
splice(start)
Removes all elements from index location start to the end of the array, and returns them in a new array.
 
splice(start, count)
Removes count elements from the array, starting at index location start, and returns them in a new array.
splice(start, count, value1, ..., valueN)
Removes count elements from the array, starting at index location start, and replaces them with new elements value1, ..., valueN. The removed elements are returned in a new array.
 
push(value1, ..., valueN)
Adds value1, ..., valueN to the end of the array; the return value is the new length of the array.
pop()
Removes and returns the last value in the array, and decrements the length of the array.
unshift(value1, ..., valueN)
Adds value1, ..., valueN to the beginning of the array; the return value is the new length of the array.
shift()
Removes and returns the first value in the array. Remaining elements are all shifted down one place.
toString()
Creates and returns a comma-separated list of the string representations of each element in the array.


Strings

A string is a primitive value consisting of a sequence of zero or more characters. A String (capitalized) is a wrapper object for a string. The methods in this section are actually String methods, but JavaScript converts between the primitive and the wrapper as needed.

Strings have a length property, which is the number of characters in the string.

Strings can be concatenated (producing a new string) with the + operator.

String methods

Here are some of the more important methods on strings.

charAt(n)
Returns the nth character of a string.
charCodeAt(n)
Returns the numeric Unicode value of the nth character of a string.
concat(string1, ..., stringN)
Concatenates the string arguments to the given string.
fromCharCode(c1, ..., cN)
Creates a string from the given numeric Unicode values.
indexOf(substring)
Returns the position of the first character of substring in the given string, or -1 if not found.
indexOf(substring, start)
Returns the position of the first character of substring in the given string that begins at or after position start, or -1 if not found.
lastIndexOf(substring)
lastIndexOf(substring, start)
Like indexOf, but searching starts from the end of the given string.
localeCompare(string)
Returns a negative, zero, or positive number according to whether string is less than, equal to, or greater than the given string, according to locale-specific ordering.
match(regexp)
Returns an array containing the results of the match, or null if no match is found. On a successful match:
  • If g (global) is set, the array contains the matched substrings.
  • If g is not set, array location 0 contains the matched text, and remaining locations contain text matched by any parenthesized subexpressions. The array index property gives the position of the first character of the match.
replace(regexp, replacement)
Returns an new string that has the matched substring replaced with the replacement.
search(regexp)
Returns the position of the first matched substring in the given string, or -1 if not found.

 


Regular expressions

A regular expression literal is written inside slashes, optionally followed by attributes. For example, /[a-z][a-z0-9_]/gi. The attribute g (global) means the pattern should be applied repeatedly; the attribute i means the pattern is case-insensitive; the attribute m (not used in this example) means "multiline mode:" a ^ will match the beginning of the string or the beginning of a line, and a $ will match the end of a line or string. Equivalently, a regular expression may be created by passing a string to the RegExp constructor, for example, new RegExp("[a-zA-Z][a-zA-Z0-9_]", "gi").

Characters inside a regular expression are classified as follows:

The following table lists the meanings of metacharacters:

Expression Meaning Examples Explanation
a literal character That same character M The capital letter M
XY An X followed by a Y cat The three characters c a t, in that order
[X-Y] Any one character between X and Y, inclusive [0-9]
[a-zA-Z]
Any decimal digit;
Any letter
[^X-Y] Any one character not between X and Y, inclusive [^a-zA-Z] Any non-letter
X* Zero or more occurrences of X \s* Any amount of whitespace
X+ One or more occurrences of X \s+ At least one whitespace character
X? An optional X dogs? Either dog or dogs
X{n,m} From n to m occurrences of X his{2,4} hiss or hisss or hissss
X{n,} n or more occurrences of X his{2,} hiss or hisss or hissss or ...
X{n} Exactly n occurrences of X his{2} hiss
X|Y Either X or Y The (boy|girl) Either The boy or The girl
^X X at the beginning of the string ^[A-Z] An initial capital letter (the ^ itself matches the empty string)
X$ X at the end of the string [\.\?!]$ Ends with a period, question mark or exclamation point (the $ itself matches the empty string)
\b The empty string between a word character (\w) and a nonword character(\W) \bC\b The word C, as in the language
\B An empty string that is not between a word character (\w) and a nonword character(\W) comput\B The initial part of the words computer, computing, etc.
(?=pat) Look ahead to make sure that the pattern pat will match next, but do not count it in the matched part \w+(?= ) A word, provided it is followed by a space
(?!pat) Look ahead to make sure that the pattern pat will not match next \w+(?!- ) A word, provided it is not followed by a hyphen
(X) Group the expression X into a single unit, and remember what it matches (////.*$) A //-style comment (keep for later reference)
(?:X) Group the expression X into a single unit, but do not remember what it matches (?:////.*$) A //-style comment (discard it)

Do not include extra spaces in regular expressions! A space is a literal character, and a space in a regular expression requires a space in the string being searched.

Regular expression methods

string.search(pattern)
Returns the position of the start of the first substring in string that matches the pattern, or -1 if the pattern is not found. If the global modifier g is present, it is ignored.
string.replace(pattern, replacement)
Searches string for the pattern and, if found, replaces it with the replacement. If the global modifier g is present, the method replaces all occurrences of the pattern with the replacement. If the pattern contains parenthesized groups, then the replacement may use $1 to represent the first group matched, $2 to represent the second group matched, and so on.
string.match(pattern)
match always returns an array. If the g flag is set, match returns an array of matched substrings.If the g flag is not set, match returns an array whose first element is the matched substring and whose nth element is the portion matched by the nth parenthesized group. The array has a length property, an index property (which holds the starting position), and an input propery (which holds string).
string1.split(string2_or_pattern)
Returns an array of substrings of string1, where each occurence of string2_or_pattern separates the substrings in string1.
pattern.exec(string)
exec returns an array whose first element is the matched substring and whose nth element is the portion matched by the nth parenthesized group. If no match is found, exec returns null. If the g flag is set, exec also modifies the lastIndex property of pattern to the character position just after the match (or to 0 if no match was found), so that if the pattern is used again, the search will resume from the point that it left off.
pattern.test(string)
Returns true if the match succeeds, and null otherwise. The g flag is handled the same way that it is for exec.
Part II: Client-Side JavaScript