Advanced Find and Replace

[ LiB ]

Although the Dreamweaver Find and Replace command doesn't necessarily have to be used in Code view, sophisticated searching is a feature usually associated with code editing. The Dreamweaver Find and Replace command is a powerful tool that supports regular expressions for searching source code (for the true geeks among us), as well as the ability to construct complex searches using a simple drop-down menu interface (for the rest of us).

Advanced Text Searches

With a basic text search, Dreamweaver lets you search the text elements in an HTML document (that is, the text that is actually visible on the page, as opposed to HTML tags). With advanced text searching, you can limit the search to text elements within, or outside, specific tags. You can specify that the text element be within one tag or multiple tags; you can even require that the enclosing tags have certain attributes. The Advanced Text search option is available through the Search and Replace window. With the window open , from the Search For pop-up menu, select Text (Advanced).

Advanced text searches are useful any time you're working with complex documents and you want to refine your searches as much as possible. Maybe you want to change all instances of Minnesota to MN, except not in titles, for instance. You would search for the state name , but only when it's not in an <h1> or other title tag. Especially if you're doing sitewide changes, this sort of refinement can make it possible to complete a Replace All search in 5 minutes, rather than an item-by-item Replace search that might take an hour .

Figure 27.31 shows the Find and Replace dialog box set up to perform a complex advanced text search. Table 27.3 explains the various search criteria available in the pop-up menus . Use the + and buttons to add or remove search criteria.

Figure 27.31. The Find and Replace dialog box set up to perform an advanced text search.

Table 27.3. Criteria for Advanced Text and Specific Tag Searches

Criterion	Description
Inside tag Not inside tag	Limit the search to text elements contained (or not contained) within a certain pair of tags. Note that only tags that occur in pairs, such as <p> ... </p> , produce valid search results.
With attribute Without attribute	Limit the search to tags that have (or don't have) a certain attribute set to a certain value. To search based only on the presence or absence of the attribute, regardless of value, leave the Value field blank.
Containing Not containing	Limit the search to tags that contain (or don't contain) a specified nested tag or text element.

Specific Tag Searches

This type of search lets you find and modify the attributes of different HTML tags, as well as add, change, and even remove specific tags. This is powerful code-editing functionality, although it isn't something you normally associate with searching and replacing.

After you've tried it a few times, you'll be amazed at how handy this kind of search is. What if you use the company logo throughout your site and then discover you forgot to give it an alt label? A sitewide search for every <img> tag with the attribute src="logo.gif" , setting the alt attribute to "Your Logo" , will fix the problem in no time flat. Or maybe you need to find all 100-percent-width tables across an entire site and change them to 90-percent width; one easy search will do it.

Figure 27.32 shows the Find and Replace dialog box set up to perform a specific tag search with several criteria. Note that instead of replacing, you can choose an action to perform on any found tags. The (slightly- less-than -intuitive) procedure for this type of search is to click the Find button to search for instances of the specified tag and then click the Replace button to perform the specified action on any found tags. Table 27.4 explains the choices available in the Action pop-up menu.

Figure 27.32. The Find and Replace dialog box set up to perform a specific tag search.

Table 27.4. Actions for Specific Tag Searches

Action	Description
Replace tag and contents	Completely replaces opening and closing tags and any nested tags or other contents with specified text. To remove the tag and its contents entirely, leave the specified text field blank.
Replace contents only	Replaces everything within the opening and closing tags with specified text, but leaves the tags in place. To remove the contents, leave the specified text field blank.
Strip tag	Removes opening and closing tags, but leaves any contents in place. Note that this action is not executed if it would result in invalid code (such as stripping a single <td> from within a table while leaving the table contents in place).
Change tag	Replaces the opening and closing tags with another specified pair of opening and closing tags, leaving any contents intact. Note that if an unclosed or self-closing tag (such as <img> or <img/> ) is specified as the replacement for a tag pair (such as <p></p> ), all contents of the original tag pair are lost.
Set attribute	Sets a specified attribute of the tag to a specified value.
Remove attribute	Removes a specified attribute of the tag.
Add before start tag	Adds specified text immediately before the opening tag.
Add after end tag	Adds specified text immediately following the closing tag.
Add after start tag	Adds specified text immediately following the opening tag. This can be used to add a new row to the top of certain tables, for instance.
Add before end tag	Adds specified text immediately preceding the closing tag. This can be used to add a new row to the end of certain tables, for instance.

Using Regular Expressions

Regular expressions aren't a kind of search, and they aren't unique to Dreamweaver. Regular expressions offer a powerful way to search code for patterns rather than specific character-by-character matches. For instance, if you're searching for all the phone numbers in a group of web pages, but you don't want to search for each phone number individually, you can use a regular expression to search for a pattern of numbers, dashes, and parentheses that all the phone numbers follow. Regular expressions are a part of Perl, JavaScript, and other scripting and programming languages. They can be remarkably simple or very sophisticated and complex, depending on what you're trying to accomplish.

If you are technically minded, be aware that Dreamweaver's searching capabilities are built from JavaScript. Therefore, all the features of regular expressions supported by JavaScript work in defining criteria for the Find and Replace command.

Writing Regular Expressions

A regular expression is a description of a text string that contains certain characters in certain positions or patterns. The simplest regular expressions just consist of the letters or numbers you want to search for, and they find only instances of those specific characters. For instance, the following three search strings are all regular expressions that find exactly the text strings specified, wherever they occur in a document:

 Fred Flintstone 87125 [e-mail] 

However, regular expressions also can include various metacharacters , which are used to describe and count characters in a document. Table 27.5 and 27.6 list the most commonly used metacharacters. Built from metacharacters shown there, a search for phone numbers might be enclosed into a regular expression like one of these:

Table 27.5. Character-Matching Regular-Expression Metacharacters

Expression	Kind of Character to Match	Example
\d	Numeral (0 to 9)	\d matches the 2s in R2D2, but nothing in Skywalker.
\D	Not a numeral	\D matches any character in Skywalker and the R and D in R2D2.
\w	Any alphanumeric character, including underscore	\w matches every character except the spaces and period in "R2D2 ran down the road."
\W	Not any alphanumeric character or underscore	\W matches only the spaces and the period in "R2D2 ran down the road."
.	Any character except newline	r.n matches ran and run, but not rain or region.
[xyz]	Any character in the brackets (specify a range of characters with a hyphen)	[a-f] is equivalent to [abcdef] . It matches the f and a in favor and the e, a, and f in leaf.
[^xyz]	Any character not in the brackets (specify a range of characters with a hyphen)	[l-p] is equivalent to [lmnop] . It matches any character in Chewbacca but none in moon or pool.
\b	Word boundary	\bh matches hello but not bother.
\B	Not a word boundary	\h matches bother but not hello.
\s	A single whitespace character (space, tab, form feed, line feed)	\sone matches one in "Is he the one?" but nothing in "Someone's there!"
\S	A single nonwhite space	\Sone matches one in "Someone's there!" but nothing in "Is he the one?"
^	The beginning of a string or line	^ a matches the a in "all for one" but nothing in "one for all."
$	The end of a string or other selection	s$ matches the second s in biscuits but not the first.
\t	Tab
\f	Form feed
\r	Carriage return
\n	Line feed
\x	The literal value of x (used to search for occurrences of special characters that would otherwise be interpreted as metacharacters)	hi . matches hit, hid, and so forth; hi\ . matches hi.

Table 27.6. Character-Counting Regular-Expression Metacharacters

Expression	How Many Characters	Example
*	The preceding character, zero or more times	om* matches om in mom, omm in mommy, and o in son.
+	The preceding character, one or more times	om+ matches om in mom, omm in mommy, but nothing in son.
?	The preceding character, zero or one time	so?e?n matches son in Anderson, sn in snack , but nothing in soon.
{n}	The preceding character, exactly n times	c{2} matches cc in Chewbacca but nothing in charcoal.
{n.}	The preceding character, n or more times	6{1.} matches the 6s in 976 and 97662, but not in 666.
{n,m}	The preceding character, at least n times and at most m times	F{1,3} matches the Fs in #F204CA and #FFCCCC , but nothing in #FFFFFF .

 (\d\d\d) \d\d\d-\d\d\d\d (*\d{3})*[\s-]\d{3}-\d{4} 

The second option is fancier but more flexible, finding any of these phone numbers:

 [phone] [phone] 800 123-4567 800-123-4567 

To learn more about regular expressions, check out Mastering Regular Expressions (published by O'Reilly). Many JavaScript and Perl books also have in-depth discussions of this topic.

Finding and Replacing with Regular Expressions

To use regular expressions in Dreamweaver, just enable the Use Regular Expressions option in the Find and Replace dialog box, and enter characters and metacharacters in any of the dialog box's Find text fields. (It makes no sense to use regular expressions as replacement strings.)

Figure 27.34 shows examples of three search types using regular expressions. The top example shows a basic Text search that finds variant spellings of labeled and makes them consistent. The center example shows an Advanced Text search that finds all occurrences of the word and in headers only ( h? returns h1 , h2 , h3 , and so on) and replaces them with &. The bottom example shows a Specific Tag search that finds all tables with percent-based widths ( \d*% finds numbers with any number of digits that end in a percent sign) and removes the width attribute.

Figure 27.34. Saving the settings from a Find and Replace dialog box.

The Use Regular Expressions and Ignore White Space options can't both be enabled at the same time because white space cannot be ignored within regular expressions.

The most powerful feature of the Dreamweaver Find and Replace command is its capability to save search criteria for later reuse. Any setup you create in the Find and Replace dialog box can be saved. This feature really makes it worthwhile to spend time and thought to create flexible, complex searches. A good set of search criteria is like your very own utility program, ready to run on any document with a few mouse clicks.

After you've filled in all the Find and Replace options as desired, you can save any set of criteria by clicking the Save button (the one with the disk icon). You're presented with a standard Save dialog box. Choose a location and name. After you have finished, your criteria are saved to a file with a .dwr extension. Figure 27.34 shows this happening.

To load a saved criteria file, open the Find and Replace dialog box, and click the Load Query button (the one with the file icon). A dialog box appears, asking you what file to load. Browse to where you stored your DWR file, and open it. The Find and Replace interface is set to your saved settings.

You also can modify the saved criteria file. After all, DWR files are just XML files storing the various search parameters as attributes of custom tags. If you love working with code, you can always open the DWR file in a text editor (Dreamweaver, even!) and modify the criteria there. The code for the search shown in Figure 27.33, for instance, looks like this:

Figure 27.33. Find and Replace dialog boxes showing different search types using regular expressions: basic Text search ( top ), Advanced Text search ( middle ), and Specific Tag search ( bottom ).

 <?xml version="1.0"?>     <dwquery>         <queryparams matchcase="false" ignorewhitespace="false"  useregexp="true"/>         <find>         <qtag qname="table">             <qattribute qname="width" qcompare="="  qvalue="\d*%"></qattribute>         </qtag>         </find>     <replace action="removeAttribute" param1="width"  param2=""/> </dwquery> 

Exercise 27.3. Finding and Replacing for Maximum Efficiency

In this exercise, you use various kinds of searches to efficiently edit a document that would otherwise be a nightmare of boring, repetitive tasks .

1. From the chapter_27 folder on the book's website, find and open states.html , and examine its contents (see Figure 27.35). You can see that it consists of two types of tables: a layout table for the overall page structure, and lots of colored data tables. Your job is to make sweeping changes to those data tables.
   
   

   Figure 27.35. The states.html file with multicolored data tables.

   
   
2. First, you want to add a row of header cells to each data table (with the headings State, Capital, and Pop.). You can do this with a Specific Tag search, but what tag do you search for? You can't search for all table tags, or the layout table will be included. You can't search by background color because each table's color is different. If you look at the code for this document, however, you'll see that each data table has a class of state assigned to it. You can search by class. For each data table, you want to add a tr with specific contents. Therefore, when you find each appropriate table tag, you add the following code after the start tag:
   
   

    <tr><th>State</th><th>Capital</th><th>Pop.</th></tr> 

   
   To do this, perform a search with the setting shown in Figure 27.36.
   
   

   Figure 27.36. The Find and Replace dialog box, ready to add a header row to each data table in states.html.

   

   
   
3. You've seen how a class assignment can help identify items for mass changes. You can use custom classes along with CSS to more easily format your table cells. Open the CSS Inspector, and you'll see that two custom classes have been defined for this document: statetitle and statedata . You want to apply these to the cells of your data tables. Can you see how a Specific Tag search can help with this? The statetitle class is easy; it should be assigned to all th tags. The statedata class is harder; you need to find some combination of characteristics that is unique for all data cells. For this document, examining the code shows that the data cells have no attributes at all, whereas the layout cells have height, width, or both. Figure 27.37 shows the Find and Replace dialog boxes to perform the searches required here. Perform these searches, and examine your code to make sure you get the results you want.
   
   

   Figure 27.37. Find and Replace dialog boxes for the searches that add statetitle and statedata classes to the data tables.

   

   
   Here's an extra: Now that you have a class providing color for the th tags, you don't need the bgcolor attribute in those tags. Can you use a Specific Tag search to remove that attribute?
   
   
4. One of the header cells has the text Pop ., but you've changed your mind and want it to say Population. This might be a simple Text search, but what if some text somewhere else in the document says Pop.? You want an Advanced Text search that finds only this text when it's in a statetitle th tag. Can you perform this search? Its setup isn't shown here.
   
   
5. The boss says he wants the cells with population numbers in them to have a white background so that they stand out. You need to do a tag search for all td tags with a class of statedata , but only those that contain numbers. It's time for a regular expression! Can you think this one through? Figure 27.38 shows a setup that works.
   
   

   Figure 27.38. The Find and Replace dialog box to search for all <td> tags with a class of statedata and that contain numbers.

   

   
   
6. Here's your last big challenge: If you examine the code for the style sheet in this document's head , you'll see that all styles refer to a group of sans-serif fonts, but each font list differs slightly. You want all font lists for sans-serif fonts to be identical. You want them to read like this: Verdana, Arial, Helvetica, Geneva, Swiss, sans-serif. This requires a Source search with a regular expression; you want to replace every font list that contains the word sans-serif with your font list. In regular-expression terms, you want to find the following:
   
   

    font-family:[^;}]*sans-serif; 

   
   and replace it with the following:
   
   

    font-family: Verdana, Arial, Helvetica, Geneva, Swiss,  sans-serif 

   
   Can you see how the regular expression works? Try it. Perform the search and then examine your document code to make sure the changes were made successfully. If they weren't, select Edit > Undo as many times as necessary, and try again.
   
   That is a pretty handy search. It might not have been too difficult to make a manual code change for just this one document, but what if you want to change internal style sheets across an entire site? More than that, you might find yourself needing a similar search again in the future. Do you want to have to figure out that regular expression every time? Of course not! This is a good set of search criteria to save. Open the Find and Replace dialog box again. Your preceding settings should still be in place. Save the search criteria as Set Sans-Serif Font List , in whatever centralized location you like. You now have a handy tool for future use.
   
   

[ LiB ]