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

Exercise: Using Subexpressions to Replace Content

Regular expressions are often used for performing document-wide find-and-replace actions. In some cases, skilled regular expression authors bravely use regular expressions to make changes across dozens or even hundreds of documents.

In this example, I will show you how to use regular expressions to replace a piece of content.

Imagine a scenario where you've been asked to update an older web page and replace a specific string of text that uses <font> and a messaging "Hello world." You've been asked to:

  1. Replace the <font> tags with the more modern, compliance-friendly <span> tag.
  2. Substitute the word "world" and the closing period with your own name followed by an exclamation mark.

Imagine that the document you are presented looks something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
<font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
<font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
</body>
</html>

There are not one but three instances of the font tag and text in question.

In order to accomplish this task, I'll need to introduce a new concept: subexpressions.

Introducing Subexpressions

Regular expressions enable you to define subexpressions in order to refer later to certain fragments of your pattern. Subexpressions are defined using parentheses. A basic example of a subexpression would be a regular expression that looks like this:

(a)(b)(c)

This regular expression defines three subexpressions. The first expression pattern (a) can be referred to as the variable $1, the second (b) as $2, and the third (c) as $3. References to subexpressions are created sequentially beginning with 1.

Applying Subexpressions to the Problem

Now that I've explained what subexpressions are and how they can be used to reference pieces of an expression, you will use them to help solve the problem.

I've defined the following regular expression to match the text in the document. 

(<font[^>]*>)(Hello )(world.)(</font>)

First, notice that there are four subexpressions defined in this regular expression. The first subexpression matches the beginning <font> tag ($1), the second matches "Hello " ($2), the third matches "world." ($3), and the fourth matches the closing </font> tag ($4). Although the subexpressions do not affect the criteria of the search, they do enable you to define logical groupings.

Complete the example now by performing the following steps:

  1. Create a new HTML document in Dreamweaver.
  2. Switch to Code view by selecting View > Code.
  3. Copy and paste the following three lines inside the <body> tag. 
    <font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
<font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
<font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
  4. Set the cursor to be at the first line of the document.
  5. Open the Find and Replace dialog box by selecting Edit > Find and Replace.
  6. Select the Use regular expressions check box to enable regular expression searches.
  7. Select the Match case check box.
  8. Select Current Document in the Find In pop-up menu.
  9. Select Source Code in the Search pop-up menu.
  10. Type the following regular expression in the Find text box:

    (<font[^>]*>)(Hello )(world.)(</font>)

  11. Click Find Next and verify that all three instances of the <font> tag are selected, one at a time. This verifies that the regular expression is in fact matching.
  12. Type the following regular expression in the Replace text box:

    <span>$2Rob!</span>

    In the Replace text box, you are indicating that you want to replace the entire font tag with a string that begins with the <span> tag, followed by the second subexpression of the regular expressions you're searching for, followed by my name and a closing </span> tag. In other words, you want to preserve the subexpression "Hello" and make changes before and after it (see Figure 12).

    The Find and Replace dialog box with regular expressions in the &quot;Find:&quot; and &quot;Replace:&quot; text boxes

    Figure 12: The Find and Replace dialog box with regular expressions in the Find and Replace text boxes

  13. Click the Replace All button.

  14. In Code view, you should see that all three <font> tags have been removed and replaced with a newly constructed string that contains one fragment of the original string ("Hello").

    Code view showing &quot;Hello Rob!&quot; where the &quot;&lt;font&gt; tags and Hello World used to be

    Figure 13: Code view showing "Hello Rob!" where the <font> tags and Hello World used to be

Page 7 of 9
Previous Page
Next Page