Using Find and Replace for rapid search and editing

- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this installment, I'll show you how to use Find and Replace for rapid site-wide search and editing. Find and Replace is a powerful Dreamweaver tool that helps you quickly search for, replace and remove any HTML mark-up, any text, or even specific tags in your code. You can use this tool on a selection of your page, on an entire page, all open documents, selected files, or even files within the current local managed site.

Find and Replace can help you save time, and boost your productivity. This tool can help you accomplish all kinds of tasks quickly. You can use it to correct coding errors, edit file names, replace blocks of mark-up, fix your typos, and even remove unwanted code from your files. For example, let's say your site contains a word that's misspelled on several pages. The Find and Replace tool can locate all instances, on every page of the site, and replace the incorrect spelling with the right one.

In addition, you can even perform fine-tuned editing, like inserting or removing a class attribute on a particular tag. Before you make any site-wide changes with this tool, it's a really good idea to make a back-up of your site. This will provide you with peace of mind, should you ever need to revert your site to how it was before you made the changes. To find a misspelled word or phrase, and replace that copy with new text on the current open page in Dreamweaver, you'll start with your open document that contains the spelling mistake, and select the misspelled word or phrase.

For instance here, you may have the words like, quote, and then there's an extra space there, The Cupcake Mary Bakery, Inc, there's a quote, and then the period's outside the quote. So you would wanna correct the text. And so with this copy selected, you'll open up the Find and Replace dialog box by selecting Edit, Find and Replace. You'll notice that your selected text is already in the Find field. Now you just need to enter your corrected text in the Replace field. In my example, I'll just change the text to Cupcake Mary Bakery without any of the quote marks.

Before you proceed with the Replace function, verify that the Find in field is set to Current Document, and that the Search field is set to Text. If desired, you can tell Dreamweaver to apply your changes to the current file, or to all open documents, a specified folder, selected files in your managed site, or in the entire, local managed site. As for the Search field, your options here are to search in Source Code, Text, Text Advanced, and Specific Tags.

The Text Advanced option provides you with string modifiers to make your search more specific. For example, you might be searching for text inside the aside tag, with an attribute of classes equal to specials. Similarly, the specific tag option lets you search for a particular tag, as well as refine your search string using modifiers, like With Attribute or Not Containing.

You can also further develop your command by choosing an action, such as Replace Tag and Contents, Strip Tag, and Add After End Tag. This is really powerful stuff. What's more, if you know how to write regular expressions, the Find and Replace dialog box can understand them. Regular expressions can help you do more complex Find and Replace functions, such as stripping or adding formatting to content that may have variable values.

To learn more about regular expressions, check out "Using Regular Expressions" with Kevin Skoglund here on Lynda.com. You can also read David Powers' two-part article on regular expressions and Dreamweaver, on Adobe's website. Lets switch back to searching for just text. If you'd like to only identify instances of your Find string without replacing, you'll click the Find Next or Find All button.

Otherwise, to run the Find and Replace command, click the Replace or Replace All button. Upon completing the task, Dreamweaver opens the results panel beneath the Properties Inspector, and lists all the changes by File name and Matched Text. Match Text will be underlined in red, making it easy for you to identify and select each changed instance by double-clicking the underline. For code corrections, it's so much easier to select your mark-up in code view.

And once you've got your code selected, you can access the Find and Replace command through the Edit menu, using the keyboard shortcut Command F or Control F, or by right-clicking inside the code window and choosing the command from the Context menu. To show you how this works, let's say for example you forgot to include the title attribute on one of your tags, and you're wondering how many instances of this error exist on your site? First, start by selecting the code, such as this link here.

Choose Find and Replace from your Context menu. Select the entire, current local site from the Find In menu. And click the Find All button. The Results panel will display a listing of all the items found. In my example, when searching the entire site, Dreamweaver identifies eight items in 13 documents. Now, to correct my code, I'll call up the Dialog Box again by pressing the arrow button in the Results panel.

Now I can copy the code string inside the Find field, and paste it into the Replace field. And then, edit it so it includes the title attribute. Now I can click Replace All. Imagine having to make all these changes manually. Find and Replace is a major productivity booster. For best results using the Find and Replace tool, you really need to make sure you include enough of your content in both the Find and Replace strings, so that your search is specific enough to yield the right response.

For instance, if you're looking for SRC or Source, you might get results that might include images, links and scripts. You can narrow down your search by including more of the tag or text around what you're seeking, such as... Another way to get your search string right, is to match upper and lower case lettering.

That way if you're looking for instances of Index with a capital I, you won't also see instances of index with a lower-case i in the results. When you're finished finding and replacing, you can close your Results panel by choosing the Close Tab Group option from the panels menu. Use this tool anytime you need to change file names, update content, correct misspellings, replace blocks of code.

You could do removing tags, strip out attributes, or even eliminate unwanted mark-up like comet tags. Whether you're tweaking code on a single page, or all the pages on your managed site, use Find and Replace to help boost your productivity.