10. Using Find and Replace

An Introduction to Find and Replace

Anyone who uses a computer should be familiar with tools that find and replace text. Such tools are typically rudimentary, but a find and replace tool for a web design application has stiffer requirements. Not only does it need to be able to locate and replace text in the body of pages, but it also must be able to locate and replace text that appears in code. Most importantly, it must be able to distinguish between the two. The word “button,” for example, has an entirely different connotation when used in the body of a page than when used in code. If you wanted to replace all HTML buttons with image buttons, you wouldn’t want to also replace the phrase button-down shirt with the phrase image-down shirt.

The find and replace tool in Expression Web is well-suited to performing intelligent find and replace for sites. It offers features specifically designed for searching HTML code, and it provides a powerful search capability utilizing regular expressions. Regular expressions (sometimes referred to as regex) are specialized search strings that match patterns in text or code. As you’ll see in this chapter, the use of regular expressions adds powerful search capabilities that would not be possible otherwise.

Finding and Replacing Text

Finding and replacing a simple word or phrase is a straightforward endeavor. In web design, however, things are rarely simple. Suppose you have designed a site that contains hundreds of pages with Social Security numbers (SSNs) on them. Because of new requirements in your company, you are charged with the task of reformatting these SSNs. You need to keep the last four digits and replace the rest of each SSN with asterisks. A simple find and replace just won’t suffice, but a regular expression is perfect for such a job.

Using Regular Expressions

The most efficient way of working with regular expressions is to separate your search into parts. When looking for an SSN, you need to find three numbers followed by a dash, two numbers followed by another dash, and then four numbers. Additionally, the first digit of the series must be between 0 and 7.

The final regular expression looks like this:

[0-7][0-9]^2-[0-9]^2-{[0-9]^4}

If you’re unfamiliar with regular expressions, this example might appear to have a complex syntax, but it’s actually simple. Let’s break it apart so you’ll fully understand how the language works.

The first set of numbers you want to match consists of three digits and is known as the area number. The first digit must be between 0 and 7 because the Social Security Administration has never issued an SSN with an area number higher than 728.

The regular expression to match this pattern is as follows:

[0-7][0-9]^2

The first part of this expression, [0-7], indicates that any single digit between 0 and 7 produces a match. The second part of the expression, [0-9]^2, indicates that any two digits between 0 and 9 produces a match. The ^ character is the repeat expression character, and it is followed by the number of times the preceding expression should be repeated.

The middle set of numbers you need to match consists of two digits between 0 and 9 and is known as the group number. The syntax for the regular expression is [0-9]^2. This syntax should now be familiar to you. It means that you want to match a character between 0 and 9 and then repeat that expression two times.

The last set of numbers you want to match consists of four digits between 0 and 9 and is called the serial number. The syntax for the regular expression is [0-9]^4. The curly braces surrounding this portion of the regular expression are explained in the “Replacing Text” section later in this chapter.

Between each set of numbers is a dash character. A dash is a special kind of character because not only can you write a regular expression to look for a dash in some text, but it is also used in regular expression syntax. (In the regular expression we’re using in this chapter, the dash is used to indicate a range of digits.) To actually find an explicit dash in text, you need to specify that you are looking for an actual dash and not using it as part of the regular expression.

The character, called the escape character, does just that. By preceding a character with the , you are telling Expression Web that you want to match that character. Therefore, the regular expression - matches a dash character in text.

Finding Text

The Find and Replace dialog (shown in Figure 10.1) is made up of three tabs:

• Find—Provides tools for locating text within one or more pages

• Replace—Provides tools for locating and replacing text within one or more pages

• HTML Tags—Provides tools for locating and replacing HTML code

Figure 10.1. The Find and Replace dialog provides all the tools you need to locate and replace both text and HTML code.

To find specific text in one or more pages, open the Find and Replace dialog by selecting Edit, Find. Enter the text you want to search for in the Find What text box, select the desired options, and click Find All to display the search results. You can choose to search from the insertion point up, from the insertion point down, or in all directions by selecting the desired radio button in the Direction section.

You can specify where to search for the text entered using the radio buttons in the Find Where section of the Find and Replace dialog. The following options are available:

• All Pages—Searches for the specified text in all pages in the current site.

• Open Page(s)—Searches for the specified text in all open pages.

• Selected Page(s)—Searches for the specified text in all selected pages. Pages can be selected in the Folder List panel or in Folders View.

• Current Page—Searches for the specified text in the current page only.

For more information on using the Folder List panel and Folders View, see Chapter 1, “An Overview of Expression Web.”

You can also specify additional options for searching in the Advanced section. Check the Regular Expression check box if the text you have entered is a regular expression. If you want to search source code for the text you have entered, check the Find in Source Code check box. The other options should be self-explanatory.

When you click Find All, Expression Web displays the results in the Find 1 panel by default. You can display the results in a second panel (the Find 2 panel) by selecting the Find 2 radio button in the Display Results In section. Figure 10.2 shows the results of a search for SSNs using the regular expression shown in Figure 10.1. The results are displayed in the Find 2 panel, but previous search results in the Find 1 panel can be recalled easily by clicking the Find 1 tab to display the Find 1 panel. This is useful when you want to start a new search but are not yet finished working on results from a previous search.

Figure 10.2. The results of a regular expression search for SSNs are displayed in the Find 2 panel. The ability to use two panels for search results allows you to easily work with two different result sets.

If you need assistance entering a regular expression search, click the right-pointing arrow button to the right of the Find What box, as shown in Figure 10.3. You can easily build simple regular expressions using this method.

Figure 10.3. The right-pointing arrow button can make creating regular expression searches fast and easy, but don’t expect to find advanced regular expression syntax here.

Complex regular expressions will likely require manual entry instead of using the Regular Expressions button. Fortunately, Expression Web keeps a list of recently used searches so you can easily recall a complex search later. By clicking the downward-pointing button to the right of the Find What box, you can access a list of previously entered searches, as shown in Figure 10.4.

Figure 10.4. Expression Web maintains a list of recent searches you can recall with the click of a button.

For an even better way of saving complex searches, see “Saving Queries,” p. 182.

Replacing Text

To replace text, open the Find and Replace dialog by selecting Edit, Replace. If the Find and Replace dialog is already open, you can simply click the Replace tab. Enter the text you want to search for in the Find What text box and the text that should replace it in the Replace With text box, as shown in Figure 10.5.

Figure 10.5. The Replace tab allows you to locate text and replace it with the text you specify.

You can also use regular expressions when replacing text. Remember that the requirements for our Social Security example are that all SSNs should be reformatted so that only the last four digits of the number are displayed. All other digits should be replaced with asterisks. Without regular expressions, you wouldn’t be able to perform such a complex replace, but with regular expressions, it’s fairly straightforward.

We’ve already covered the regular expression used to locate SSNs. Here it is again:

[0-7][0-9]^2-[0-9]^2-{[0-9]^4}

I’ve already explained everything in the regular expression with the exception of the curly braces. Curly braces in a regular expression enable you to store the result of the expression inside the braces so it can be used later. An expression inside curly braces is called a tagged expression. You can have any number of tagged expressions in a regular expression.

Tagged expressions are used when replacing text using regular expressions. Let’s look at a specific example using the SSN replacement we’re performing. Consider the following SSN:

232-00-2323

When our regular expression locates this SSN, it should replace it with the following:

***-**-2323

Replacing the numbers with asterisks is simple, but you also need to leave the last four digits as they are. You could just change the regular expression so that it located all patterns of ###-## and just replaced them with asterisks. However, some instances of that pattern might not be SSNs. For example, suppose the pages also contain employee numbers and are in the format ###-##. In that case, you would be replacing the employee numbers with asterisks, and that’s not what you want.

Tagged expressions are the perfect solution to this problem. By using tagged expressions, you can use your regular expression as-is and easily perform the replace operation that is required.

Figure 10.6 shows the Find and Replace dialog ready to perform the SSN replacement. The regular expression in the Replace With text box shows the asterisks that will be used in place of the first five numbers in the SSN. The expression 1 that appears in place of the last four digits will be replaced with the result of the first tagged expression.

Figure 10.6. By using tagged expressions, portions of matched text can be stored for use when replacing text.

The right-pointing arrow button next to the Replace With text box (see Figure 10.7) provides easy access to tagged expressions. Simply click the right-pointing arrow button and then select the desired tagged expression to have it inserted into your regular expression.

Figure 10.7. Insert tagged expressions by clicking the Regular Expressions button.

Using HTML Rules in Find and Replace

Let’s add another level of complexity to the SSN search. Suppose there are many places where SSN-type patterns are presented in the site, but you only want to find and replace the ones that are actual SSNs. All the actual numbers appear inside <div> tags and are styled with a CSS class called empData. What may at first seem like an impossible task is actually made easy using HTML rules.

For more information on CSS styles, see Chapter 17, “Creating Style Sheets.”

To access HTML rules, click the HTML Rules button in the Find and Replace dialog. When you do, the HTML Rules dialog is displayed, as shown in Figure 10.8.

Figure 10.8. The HTML Rules feature adds impressive power to your searches.

Let’s configure an HTML rule to replace the SSN found in the sample site in the ExamplesCh10FilesWebsite folder on this book’s website at informit.com:

1. Open the site in Expression Web.
2. Open the default.htm page.
3. Select Edit, Replace to display the Find and Replace dialog.
4. In the Find What text box, enter the following regular expression:

   [0-7][0-9]^2-[0-9]^2-{[0-9]^4}

5. In the Replace With text box, enter the following regular expression:

   ***-**-1

6. Click the HTML Rules button.
7. Select New Rule in the dialog.
8. From the New Rule drop-down, select Inside Tag.
9. From the tag drop-down, select div.
10. Select New Rule directly under the Inside Tag rule, as shown in Figure 10.9.

    Figure 10.9. You can create nested rules to search for specific patterns within a specified tag. In this case, you apply a new rule to the div tag search.

    

11. From the New Rule drop-down, select With Attribute.
12. From the attribute drop-down, select Class.
13. Click inside the [any value] drop-down and enter empData, as shown in Figure 10.10

    Figure 10.10. Powerful searches can be created by nesting rules. In this case, you want to find only text in a <div> with a CSS class attribute of empData.

    

14. Click OK to add the new HTML rule.

After the HTML rule has been added, the text of the HTML rule will be displayed next to the Clear Rules button, as shown in Figure 10.11.

Figure 10.11. Applied HTML rules are displayed in the Find and Replace dialog. To clear a rule, click the Clear Rules button.

Make sure that the All Pages radio button is selected and click Replace All to perform the replacement.

Finding and Replacing HTML Tags

In addition to searching for and replacing text within a page, you can search and replace or modify HTML tags using the Find and Replace dialog.

To find and replace HTML tags, select Edit, Find or Edit, Replace and click the HTML Tags tab. Select the desired tag in the Find Tag drop-down and select the replace action from the Replace Action drop-down if desired. Depending on what you select in the Replace Action drop-down, other options are made available.

Let’s change the empData class in default.htm to employeeData. Open the site and open default.htm. Complete the following steps to replace the class attribute’s value:

1. Select Edit, Replace.
2. Click the HTML Tags tab.
3. From the Find Tag drop-down, select div.
4. In the Replace Action drop-down, select Set Attribute Value.
5. In the Attribute drop-down, select Class.
6. In the To drop-down, enter employeeData, as shown in Figure 10.12.

   Figure 10.12. Searching for and modifying HTML tags is another powerful feature of the Find and Replace tool in Expression Web.

   

7. Click Replace All to replace the class attribute.

Switch to Code View and look at the <div> tag. Notice that the empData CSS class has been changed to employeeData.

Saving Queries

The SSN example used in this chapter is a fairly simple one. Much more complex searches are possible, and if you add a series of HTML rules to the mix, configuring a search can be time-consuming. That’s not a big deal if your search is a one-time thing, but if you find yourself in the position of having to perform a particular search more than once, being able to save the search for later use can save a lot of time.

Expression Web can save searches you perform using the Query buttons in the Find and Replace dialog. Click the Save Query button to save a query and the Open Query button to open a previously saved query.

Expression Web queries are saved as .fpq files and are in XML format. The following code shows the XML for the SSN example used in this chapter:

Editing and Removing Recent Searches

As mentioned previously in this chapter, Expression Web saves a list of previously used searches so you can access them by clicking the Most Recently Used button, shown earlier in Figure 10.4. Expression Web saves a long list of recent searches, and it’s likely that you will want to clear them out or edit them from time to time. Expression Web doesn’t provide any user interface element for editing or removing recent searches, but you can do it manually by editing the Registry.

Most recently used searches are stored in the following Registry key:

HKEY_CURRENT_USERSoftwareMicrosoftExpressionWeb4.0FindMRUTo make changes or remove recent searches, make sure Expression Web is not running; then perform the following steps:

1. Open a command prompt.
2. From the command prompt, type regedit and press Enter.
3. Expand the HKEY_CURRENT_USER section.
4. Expand the Software section under HKEY_CURRENT_USER.
5. Expand the Microsoft section under Software.
6. Expand the Expression section under Microsoft.
7. Click the Web folder once under Microsoft to select it.
8. Select File, Export.
9. Enter ewd_backup.reg for the filename and save the file to your Desktop or another accessible area. This creates a backup of the Web Designer section of the Registry.
10. Expand the Web section.
11. Expand the 4.0 section under Web.
12. Click the FindMRU folder once to select it.

You should see Registry keys similar to the ones in Figure 10.13. Note that the names of these keys are in incremental order beginning at 0. To remove all entries from the recent list of searches, select all keys with a numeric value and press Delete to delete them.

Figure 10.13. Recent searches are stored in the Registry. You can remove or edit them, but be careful and back up the key first!

If you’d like to edit an entry, double-click the entry and modify it as needed. Click OK to commit the change, as shown in Figure 10.14.

Figure 10.14. Double-click the name of a specific key to edit it.

If you want to remove one or more entries but not all of them, make sure that any remaining entries are in numerical order beginning at 0. To renumber a specific key, select it and then press F2. Enter the new name and press Enter to commit it.

If you make any errors while editing the Registry, close the Registry Editor and double-click the .reg file you saved before you began editing the Registry. Click Yes when asked if you want to add the information to the Registry.

As a final note, if you make changes to the recent searches and your changes don’t show up in Expression Web, make sure that Expression Web is closed when you are making your changes. If it is closed and your changes still don’t take effect, it’s likely that an instance of EXPRWD.EXE is running and you just can’t see it. Right-click in an empty area of your taskbar, and select Task Manager from the menu. Click the Processes tab and look for EXPRWD.EXE. (You can click the Image Name column to search by that column.) If you find an active instance, select it and click End Process to get rid of it. You should then be able to successfully edit your recent searches.