Accessibility

Dreamweaver Article

 

Introduction to Regular Expressions in Dreamweaver


Table of Contents

  1. Introduction
  2. Background on Regular Expressions
  3. Regular Expressions 101
  4. Exercise: Your First Regular Expression
  5. Matching Closing Tags Using an Optional Character
  6. Using the Not Operator to Match Tag Attributes and Values
  7. Exercise: Using Subexpressions to Replace Content
  8. Searching for CSS Inline Styles
  9. Tips and Tricks

Regular Expressions 101

Before I explore some real-world examples, I'd like to review some of the basic regular expressions principles and syntax to help form a strong foundation for later discussions. Please note that it's not important that you remember the entire contents of this section, but rather that you read through it and return to it as a reference.

Literal Expressions

In the land of regular expressions, all digitals and alphabetic characters match themselves. These are referred to as literal expressions, simple expressions, or simple sequences. In other words, searching using a regular expression that only contains alphanumeric characters produces the results in a normal, non-regular expression.

Regular Expression Matches
San San Serif
Santa Rosa
Artisan

Matching using literal expressions has severe limitations. For example, imagine that you want to find only cases of the term "San" in which "San" occurs in either the first three characters of a line or the last three characters of a line. With literal expressions alone, this would not be possible. Enter regular expression special characters.

Special Characters

Special characters, sometimes referred to as metacharacters, are reserved, non-alphanumeric characters that provide special types of functionality. There are approximately 11 of these special characters that are summarized in the following table along with examples.

Character Matches Example
^ Beginning of input or line ^T matches "T" in "This good earth" but not in "Uncle Tom's Cabin"
$ End of input or line h$ matches "h" in "teach" but not in "teacher"
* The preceding character 0 or more times um* matches "um" in "rum", "umm" in "yummy", and "u" in "huge"
+ The preceding character 1 or more times um+ matches "um" in "rum" and "umm" in "yummy" but nothing in "huge"
? The preceding character at most once (that is, indicates that the preceding character is optional) st?on matches "son" in "Johnson" and "ston" in "Johnston" but nothing in "Appleton" or "tension"
. Any single character except newline .an matches "ran" and "can" in the phrase "bran muffins can be tasty"
X|y Either x or y FF0000|0000FF matches "FF0000" in bgcolor="#FF0000" and "0000FF’" in font color="#0000FF"
{n} Exactly n occurrences of the preceding character o{2} matches "oo" in "loom" and the first two o's in "mooooo" but nothing in "money"
{n,m} At least n, and at most m, occurrences of the preceding character F{2,4} matches "FF" in "#FF0000" and the first four F’s in #FFFFFF

Note: The above table was originally published in the Dreamweaver product help (Help > Using Dreamweaver).

Or Statement

A vertical bar (also known as a pipe character) is used to indicate that either the pattern before or after matches. An example would be: 

style|class

This expression would match either the word "style" or "class."

Repetition

In the table above, special characters help specify how often a character is allowed to repeat. These are the *, +, and ? characters. The * character indicates that the preceding character occurs zero or more times. The + character, similarly, will match one or more instances of the preceding character. The ? character will match the previous character one or more times─that is, the preceding character is optional.

Character Classes

Character classes provide you with a way to restrict the characters you are searching for to a certain set by wrapping those characters in brackets.

Character Matches Example
[abc] Any one of the characters enclosed in the brackets. Specify a range of characters with a hyphen (for example, [a-f] is equivalent to [abcdef]). [e-g] matches "e" in "bed", "f" in "folly", and "g" in "guard"
[^abc] Any character not enclosed in the brackets. Specify a range of characters with a hyphen (for example, [^a-f] is equivalent to [^abcdef]). [^aeiou] initially matches "r" in "orange", "b" in "book", and "k" in "eek!"
\b A word boundary (such as a space or carriage return). \bb matches "b" in "book" but nothing in "goober" or "snob"
\B Anything other than a word boundary. \Bb matches "b" in "goober" but nothing in "book"
\d Any digit character. Equivalent to [0-9]. \d matches "3" in "C3PO" and "2" in "apartment 2G"
\D Any nondigit character. Equivalent to [^0-9]. \D matches "S" in "900S" and "Q" in "Q45"
\w Any alphanumeric character, including underscore. Equivalent to [A-Za-z0-9_]. b\w* matches "barking" in "the barking dog" and both "big" and "black" in "the big black dog"
\W Any non-alphanumeric character. Equivalent to [^A-Za-z0-9_]. \W matches "&" in "Jake&Mattie" and "%" in "100%"
\s Any single white-space character, including space, tab, form feed, or line feed. \sbook matches "book" in "blue book" but nothing in "notebook"
\S Any single non–white-space character. \Sbook matches "book" in "notebook" but nothing in "blue book"
\f A form feed character. --
\n A line feed character. --
\r A carriage return character.

Note: Dreamweaver MX 2004 contains a bug in its regular expression engine where carriage return characters (\r) are not recognized when you click the Find Next button. However, clicking the Find All button does reveal these characters.
\t A tab character. --

By combining repetition, special characters, existing character classes as well as defining new custom classes, web developers can create complex expressions that can be shared with friends and colleagues.

For example, imagine that in an HTML page you wanted to strip out any extra space that trails a <br/>. You notice that in some cases in your code, the line break tag appears with a space character after the "br" like so: <br />. In other cases, you notice that a co-worker has actually two or three extra space characters or maybe even a tab character.

Without regular expressions, for each possible combination, you would need to specify a string of text. By leveraging the power of regular expressions, you can create a single pattern to match all of these cases. An example would be:

Character Matches
<br[\s/]* Three string literals, a less-than sign followed by "br" followed by zero or more instances of white-space characters, including spaces, tabs, form feeds, or line feeds

Special characters when combined with literal expressions and other special characters provide infinite options for web developers to construct regular expressions.

Enabling Regular Expression Searches

Enabling regular expressions searches in Dreamweaver is very straightforward.

  1. Open the Find and Replace dialog box by selecting Edit > Find and Replace.

  2. Select the Use regular expression check box. When selected, Dreamweaver will perform searches using regular expressions syntax (see Figure 1)

    The 'Use regular expression' checkbox option in the Find and Replace dialog box

    Figure 1: The Use regular expression check box in the Find and Replace dialog box

Page 3 of 9
Previous Page
Next Page