Join David Powers for an in-depth discussion in this video Quick find and replace in the current document, part of Dreamweaver CC New Features.
- [Narrator] Find and replace has undergone a major overhaul in Dreamweaver CC 2017.1, but I think the changes make a lot of sense. Let's begin by taking a look at the find menu. The first point to notice is that even though I've got a page open in live view, the first few items are not grayed out. The next point to notice is that the first item is find in current document, and it uses the same keyboard shortcut that was previously assigned to find and replace, control F on Windows, command F on a Mac.
And there's a separate option for replace in current document and that has a different keyboard shortcut. It's control H on Windows, on a Mac, it's command option F. The third item at the top of the find menu is find and replace in files. I'll come back to that later in this chapter. In this video, I'm going to concentrate on the two options for the current document. At the moment, the document window is in live view, but when I select find in current document, or press control or command F, Dreamweaver automatically opens split view with this quick find bar, down at the bottom of the screen.
Not only has it been moved from the top of the document window, it's been greatly simplified, and the cursor has been automatically placed in the find field so I can start typing. And it's highlighted my search term there, and if we look on the right hand side of the quick find bar it indicates that it's the second of 10 instances that it's found. Now the reason that it's found the second instance rather than the first one is because this is the first time that it appears in the body of the document.
There are a couple of icons here to find next, or to go to previous. If I click go to previous, we go to the head of the document and we can see that Landon is inside the title element. But if I go back to these icons here find next, it goes to the next one, and the next one again, and we can see that other instances are highlighted in yellow. So the one that's currently selected is in orange. Others are in yellow, and that same color is reflected here in the scroll bar.
This orange marker indicates the currently selected one, and the yellow markers indicate the approximate position in the source code of the other instances. These markers don't align with the actual code itself. They just indicate the approximate position of each instance as you scroll through code view. Now although I'm in split view Dreamweaver hasn't been highlighting the current selection in live view. So let's close the quick find bar.
We can do that by clicking this X icon on the right. It's in the same position on the Mac version, and then I'm going to switch to design view, and then expand design view so it's completely in design view, and then press control or command F to bring up find in current document, and it's brought up the quick find bar, and as before it's opened split view. Let's just cycle through by clicking find next several times and although we're moving through the source code nothing is happening up here in design view.
So although you can launch this quick find bar in either live view or design view the search itself is confined to code view. You can also set some basic conditions on the search term by clicking this icon here just to the left of the find field, and this opens a pop up panel with the various options. Although it's hidden away, I think this is much more user friendly than the obscure filter icons that were in the original release of CC 2017. There's no need to remember what each icon stands for.
The meaning is spelled out in plain language. By default, ignore white spaces is selected, but let's say you want to make a case sensitive search using a regular expression. Select match case and use regular expression, then it grays out these two other options here. I'll talk about find in selected text later. So if I click away to dismiss that pop up panel, we've still got the same 10 instances selected, because although we're using a regular expression, this is just searching for literal text.
If I click inside there and change that A to a dot or a period, we can now see that we've selected item two of 13. So if we use find next and go through we see we've not only got Landon there, we've also found London. The down side to having the filter options in a pop up panel is that you can't immediately see which ones are being applied. However, there's no need to reopen the panel. Let's just hover over the icon, and we get a tool tip saying that match case and use regular expressions have been selected, and these filter options are sticky, so Dreamweaver remembers them the next time that you use quick find.
So that's the quick find bar in the current document. What about find and replace? Well it's actually part of the same bar, only the replace field is hidden, and there are several ways to reveal it. The simplest way, if you've got the quick find bar already open, is to click this little up arrow here, show more, and there is the replace field, and to hide the replace field just click the arrow again, and another way to show the replace field is to use the keyboard shortcut control H on Windows, or command option F on a Mac.
Of course you don't need to open the quick find bar first. Let's close it by clicking this X icon, and you can now go to the find menu and select replace in current document, or use the keyboard shortcut, and that will bring up both find and replace in a single operation, and it's remembered the search term. It's also remembered the options. I don't want to use a regular expression now, so let's just open that, deselect match case, and use regular expression. Then just click away.
Because there's no longer a match, the find field is surrounded in red. So let's just click in there and change that back to Landon and then just let's rebrand the hotel. We'll just make a simple change. We'll call it Randon instead, and then click the replace button. It replaces that instance, and then jumps to the next one. So I can change that and then it jumps to this next one here, so we can confirm that it has actually been changed there. But if you're confident that you want to replace all instances of the search term without checking just click replace all.
Dreamweaver whips through the entire document. It changes everything there, and it opens the search panel, showing you exactly where everything has been changed, and if you want to check any of them, just click anywhere inside code view to make sure the focus is there, and then you can double click any of these instances in the search panel, and Dreamweaver will automatically take you to the correct line and highlight that particular instance. Now, at the moment I've got design view open so we can see that the same text has been highlighted here in design view.
If live view is open instead, the HTML element that contains the text is selected. But there are a couple of important points to note about this quick find and replace. There's no longer an option with replace in current document to exclude instances of the search term from replace all. Also, the basic usage searches through everything in code view. For example if I go into the find here and change Landon to LI, it's not only finding LI in menu link, which is an attribute of an ID, and in nav links in an HREF, it's also finding these LI tags here.
In other words, find and replace in current document, that searches through the entire source code of the current document. So although I've been working in split view, I think that this quick find and replace bar is best suited to working in code view. So, does this simplification represent a downgrading of find and replace in Dreamweaver CC 2017.1? No, not at all. As you work through the rest of this chapter, I think you'll find that find and replace in this version of Dreamweaver is both powerful, and flexible.
David Powers begins with find and replace, showing how to work with the streamlined Find and Replace bar, which now works only within the current document and is designed for quick find and replace operations. He also shows how to use find and replace in multiple documents, including advanced operations on a specific tag, as well as finding and selecting multiple elements in Code view. Next, he covers PHP support, explaining that Dreamweaver now supports PHP 7.1, and showing how to set the default version of PHP in Preferences, as well as how to set the version of PHP for an individual site. He wraps up by discussing a few smaller enhancements.
- Restricting the scope of a quick search
- Finding and replacing more selectively
- Advanced find and replace in a specific tag
- Setting the default version of PHP in Preferences
- Applying a link to selected text in Live View
- Changing information displayed in the Files panel