<<< Back to Page 3
Finding and Replacing
Dreamweaver's Find and Replace feature can save you a lot of time, because you can automatically find and change text on a single page, in pages within a folder, on pages you select, or throughout your site. You can choose to change text in Design view, or search and change just in Code view.
Imagine that you have a company's site with dozens of pages devoted to singing the praises of their premier product, the amazing WonderWidget. Then one day you get a call from your client letting you know that because of a trademark dispute, they have to rename the product WonderThing. Rather than opening each page and making one or more changes on each of them, just put Dreamweaver's Find and Replace feature to work, and you'll be done in just a few minutes.
The Find and Replace window
The Find and Replace window, which you open by choosing Edit > Find and Replace, or by pressing Ctrl-F (Cmd-F), will be the tool you use for changing text, as shown in Figure 4.39. Let's look at some of the parts of this window.
Figure 4.39 The Find and Replace dialog provides a lot of power for making quick changes on a single page, or throughout your site.
- The Find in pop-up menu allows you to tell Dreamweaver the scope of the search. You can choose to find text in the Current Document (the default); Selected Text; Open Documents; in a Folder you select; in Selected Files in Site; or in the Entire Current Local Site.
- The Search pop-up menu lets you choose what kind of search you want to do. You can choose Text; Text (Advanced), which gives you additional search options; Source Code, which allows you to search in the HTML; or Specific Tag, which searches the contents of HTML tags that you select. The latter two options are covered later in this chapter.
- The Find field is where you enter the text you wish to find.
- The Replace field is where you enter the text you want to use to replace the found word.
- The Save Query button allows you to save searches for later use. This is great for instances where you create complex queries, so you don't have to do all the work to set up the search again.
- The Load Query button allows you to retrieve a saved search.
- The Search Options let you constrain your searches. "Match case" returns results with the same uppercase and lowercase letters as the text you entered in the Find field. "Match whole word" only finds the text if it matches one or more complete words. "Ignore whitespace" tells Dreamweaver not to pay attention to additional spaces, tabs, and non-breaking spaces. It's on by default, and it's usually best to leave it on. Finally, "Use regular expression" (covered later in this chapter) lets you use wildcard characters to construct extremely complex searches.
Finding Text with a Simple Search
Simple searches work pretty much the same way that they do in a word processor. Just enter the text you want to find and the text that you want to replace it with, and away you go. Of course, you don't have to replace text; if you want you can just use the Find and Replace dialog to find text in one or more files.
To find text:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears (Figure 4.39).
- From the Find in pop-up menu, choose one of the options for the scope of your search.
- From the Search pop-up menu, choose Text.
- In the Find field, type the word or phrase that you're looking for.
Click the Find Next button.
Dreamweaver finds and highlights the found text. If the scope of the search included more than one page, Dreamweaver opens the first file the text was found within, and highlights the text. If the text isn't found, you'll get a message to that effect at the bottom of the Find and Replace dialog.
or
Click the Find All button.
Dreamweaver does the search, closes the Find and Replace dialog, and opens the Search tab of the Results panel (Figure 4.40).
Figure 4.40 The Search tab of the Results panel shows you the file name and matched text when you click the Find All button.
- If you clicked Find All in step 5, double-click one of the search results in the Results panel to open it and highlight the found text.
To find the next result:
Choose Edit > Find Next, or press F3 (Cmd-G).
Dreamweaver finds and highlights the next result of the search, without reopening the Find and Replace dialog.
To find and replace text:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
- From the Find in pop-up menu, choose one of the options for the scope of your search.
- From the Search pop-up menu, choose Text.
- In the Find field, type the word or phrase that you're looking for.
- In the Replace field, type the replacement word or phrase.
Click the Find Next button.
When Dreamweaver finds the text, it is highlighted.
Click the Replace button.
Dreamweaver replaces the found text with the contents of the Replace field.
or
Click Replace All.
Dreamweaver warns you that you cannot undo changes made in unopened files. Of course, you can undo changes in any open documents by choosing Edit > Undo. If you still want to make the changes, click Yes.
Dreamweaver searches through the entire scope of the search, replacing all occurrences of the found text. When it is done, you'll see a message telling you how many changes it made.
Performing Advanced Text Searches
An advanced text search allows you to do a more precise search by looking for text within (or outside of) particular HTML tags. You can further fine-tune the search by specifying particular attributes of the HTML tags.
Perhaps the most common example of why you would want to use such a search lies in the title of your Web pages. Whenever you create a new page in Dreamweaver, the page automatically gets the title "Untitled Document." If you forget to enter titles, you could end up with a bunch of pages on your site with the same "Untitled Document" name (it's easy to do: while writing this section, I found and fixed a page on my personal site that had been titled "Untitled Document" for four years!). A basic search and replace won't help, because "Untitled Document" is within the <title> tag of the pages, and a basic search only searches the body of a document. An advanced text search, which combines text and HTML searches, is the solution.
To perform an advanced text search:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
- From the Find in pop-up menu, choose one of the options for the scope of your search.
From the Search pop-up menu, choose Text (Advanced).
The dialog changes, and adds the option to search tags (Figure 4.41).
Figure 4.41 The Text (Advanced) option allows you to search for text within HTML tags.
- In the Find field, type the word or phrase that you're looking for.
Choose either Inside Tag or Not Inside Tag from the pop-up menu next to the + and - buttons.
Inside Tag refers to text that is enclosed within a container tag, such as <p>...</p>.
- Choose an HTML tag from the Tag pop-up menu.
(Optional) If you want to narrow the search further by limiting the search to a particular attribute of the tag you chose in step 6, click the + button. If you do not, skip to step 12.
The attribute line is added to the dialog (Figure 4.42).
An example of an attribute would be the width attribute of the <table> tag.
Figure 4.42 You can narrow your search further by adding one or more attributes to the tag search.
- (Optional) From the first pop-up menu in the attribute line, choose With Attribute or Without Attribute.
(Optional) Choose the attribute you want from the next pop-up menu.
Dreamweaver only shows the attributes for the tag you chose in step 6.
- (Optional) Set a comparison in the next pop-up menu, choosing from = (equals), < (less than), > (greater than), or != (not equals). These only work if the attribute's value is a numeric amount, such as the size attribute of the <font> tag, i.e., <font size="4">.
(Optional) In the next field (which is also a pop-up menu), type the value of the attribute. This can be a number or text.
or
Choose [any value] from the pop-up menu. This is useful when you want all tags with a particular attribute, but you don't care what the value of the attribute is.
- If you want to replace the found text, type the replacement word or phrase in the Replace field.
- Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Finding and Replacing in Source Code
Dreamweaver's ability to find and replace within the HTML source code is extremely powerful. You can look for text within particular tags, and you can even look within particular tags for specific attributes. You can also find text relative to other tags. For example, you can change specified text within a <table> tag, and leave everything else alone. If you like, you can even use Find and Replace to replace, delete, or change tags and attributes.
Searching and replacing inside source code is much like regular text searches, except that you'll be working in Code view. When you perform the search, Dreamweaver automatically changes to Code view, so you don't have to do it manually before you start the search.
To find and replace in source code:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
- From the Find in pop-up menu, choose one of the options for the scope of your search.
- From the Search pop-up menu, choose Source Code (Figure 4.43).
Figure 4.43 Choose Source Code to search the HTML in Code view.
- In the Find field, type the word or phrase that you're looking for.
- In the Replace field, type the replacement word or phrase.
- Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Finding and Replacing with a Specific Tag
A specific tag search lets you find and modify HTML tags. This has many uses; for example, many people are now converting old sites that used <font> tags to CSS. You can use a specific tag search to strip out all those old tags. Or you can change the now-passé <b> and <i> tags to their more modern equivalents, <strong> and <em>.
The key to the specific tag search is the Action menu, which specifies what replacement action Dreamweaver will carry out on the tags found in the search. See Table 4.4 for a list of the actions available.
Table 4.4. Action Menu Options
|
Action |
Description |
|
Replace Tag & Contents |
Replaces the tag and everything within the tag with the contents of the field that appears to the right of the Action pop-up menu when this action is selected. This can be either plain text or HTML. |
|
Replace Contents Only |
Replaces the contents of the tag with the contents of the With field. |
|
Remove Tag & Comments |
Deletes the tag and all of its contents. |
|
Strip Tag |
Removes the tag, but leaves any content within the tag. |
|
Change Tag |
Substitutes one tag for another. |
|
Set Attribute |
Changes an existing attribute to a new value, or adds a new attribute. |
|
Remove Attribute |
Removes an attribute from a tag. |
|
Add Before Start Tag |
Inserts text or HTML before the opening tag. |
|
Add After End Tag |
Inserts text or HTML after the closing tag. |
|
Add After Start Tag |
Inserts text or HTML after the opening tag. |
|
Add Before End Tag |
Inserts text or HTML before the closing tag. |
To find and replace within a specific tag:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
- From the Find in pop-up menu, choose one of the options for the scope of your search.
From the Search pop-up menu, choose Specific Tag.
The Find and Replace dialog changes to show the tag functions (Figure 4.44).
Figure 4.44 When you are searching within a specific tag, you can add attributes for that tag, and you can also specify actions that you want to perform on the found tag.
Choose the tag that you want from the tag pop-up menu that appears next to the Search pop-up menu.
You can either scroll the pop-up menu to find a tag, or you can type the first letter of the tag in the box. Dreamweaver automatically scrolls the list.
(Optional) If you want to narrow the search to a particular attribute of the tag that you selected, click the + button, then choose values for that attribute, as discussed previously in this chapter.
If you want to narrow the search further, you can do so by clicking the + button and adding attributes.
- Choose from the Action pop-up menu, then (depending on the action you chose) set any required values.
- Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Using Regular Expressions for Searching
A regular expression is a pattern, written using special symbols, which describes one or more text strings. You use regular expressions to match patterns of text, so that Dreamweaver can easily recognize and manipulate that text. Like an arithmetic expression, you create a regular expression by using operators, in this case operators that work on text, rather than numbers.
The operators in a regular expression (see Table 4.5 on page 130) are like the wildcard symbols that you may have seen in find and replace features in other programs, such as word processors, except that regular expressions are much more powerful. They can also be complex and difficult to learn and understand, so if Dreamweaver's other finding and replacing methods are sufficient for you, you may not need to bother with regular expressions.
Table 4.5. Regular Expression Special Characters
|
Character |
Matches |
|
\ |
Escape character; allows you to search for text containing one of the below special characters by preceding it with the backslash |
|
^ |
Beginning of text or a line |
|
$ |
End of text or a line |
|
* |
The preceding character zero or more times |
|
+ |
The preceding character one or more times |
|
? |
The preceding character zero or one time |
|
. |
Any character except newline |
|
\b |
Word boundary (such as a space or carriage return) |
|
\B |
Non-word boundary |
|
\d |
Any digit 0 through 9 (same as [0-9]) |
|
\D |
Any non-digit character |
|
\f |
Form feed |
|
\n |
Line feed |
|
\r |
Carriage return |
|
\s |
Any single white space character (same as [ \f\n\r\t\v]) |
|
\S |
Any single non-white space character |
|
\t |
Tab |
|
\w |
Any letter, number, or the underscore (same as [a-zA-Z0-9_]) |
|
\W |
Any character other than a letter, number, or underscore |
|
[abcde] |
A character set that matches any one of the enclosed characters |
|
[^abcde] |
A complemented or negated character set; one that does not match any of the enclosed characters |
|
[a-e] |
A character set that matches any one in the range of enclosed characters |
|
[\b] |
The literal backspace character (different from \b) |
|
{n} |
Exactly n occurrences of the previous character |
|
{n,} |
At least n occurrences of the previous character |
|
{n,m} |
Between n and m occurrences of the previous character |
|
() |
A grouping, which is also stored for later use |
|
x|y |
Either x or y |
Learning regular expressions is beyond the scope of this book, but we'll show you how to use one in an example. Let's say that you want to find all of the HTML comments throughout your site. You can use this simple regular expression:
<!--[\w\W]*?-->
Let's break that expression down. You read a regular expression from left to right. This one begins by matching the beginning characters of the HTML comment, <!—. The square brackets indicate a range of characters; for example, [a-z] would match any character in the range from a to z. In this case, the range includes two regular expression operators: \w means "any single letter, number, or the underscore," and \W means "any character other than a letter, number, or underscore." Taken together as a range, [\w\W] means "any range of characters." The * means "the preceding character (in this case, everything found by the contents of the square brackets) zero or more times" and the ? means "the preceding character zero or one time." Taken together, they match a comment of any length. The regular expression ends by matching the closing characters of an HTML comment, —>.
To search with a regular expression:
Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
- From the Find in pop-up menu, choose one of the options for the scope of your search.
From the Search pop-up menu, choose any of the options.
In this case, since we're looking for HTML comments, you should choose Source Code.
- Enter the regular expression in the Find field (Figure 4.45).
Figure 4.45 You can add regular expressions to both the Find and Replace fields.
Select the check box next to "Use regular expression."
When you choose "Use regular expression," it disables the "Ignore whitespace" search option, because they are mutually exclusive.
- (Optional) Enter text or a regular expression in the Replace field.
- Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Checking Spelling
No word processor comes without a spelling checker these days, and neither does Dreamweaver. You can check the spelling on the currently open page and add words to Dreamweaver's spelling checker in a personal dictionary.
To spell-check your page:
Choose Text > Check Spelling, or press Shift-F7 (same on Windows and Mac).
If Dreamweaver finds a word it believes is spelled incorrectly, the Check Spelling dialog opens (Figure 4.46). Otherwise, you'll get a dialog that says "Spelling check completed."
Figure 4.46 Click Add to Personal in the Check Spelling dialog to add an unknown word to Dreamweaver's personal dictionary.
Click Add to Personal if the word Dreamweaver found is correct and you want to add it to your personal dictionary so that Dreamweaver doesn't flag it as an error again.
or
Click Ignore to tell the spelling checker to ignore this instance of the word, or Ignore All to ignore the word throughout the document.
or
Select a replacement from the Suggestions list, or type the replacement in the Change to text box. Then click the Change button, or click Change All to replace the word throughout the document.
- When the spelling check is finished, click Close.
){kind=link}