Join James Williamson for an in-depth discussion in this video Regular expressions, part of Dreamweaver CS3 Beyond the Basics.
- View Offline
In the previous video, we explored using Dreamweaver's Find and Replace feature. We will take a look at making our searches more powerful by using regular expressions. Regular expressions are special characters that we combine to define sets of string values. They allow us to find text that fits into a specific set of parameters. So for example, we could use regular expressions to find all email addresses from a specific company. Now, regular expressions can get extremely complicated. So before we get into taking a look at these, I want to open up the Help file. You can do this along with me. Just go up to the menu, go to Help, and go to Dreamweaver Help. If you are ever unsure about where something is, there is this nice little search feature and so without having to look through the index or the menu over there, I can just type in regular expressions, and it returns this nice little search criteria to me.
I can click on About regular expressions, and it takes me right to that, which is beautiful. Now, if I look at the About regular expressions, the thing I want you to pay special attention to is this table set. This is nice, because it's a wonderful resource for you when you are creating your own regular expressions. It will show you the characters that we can use when we build our regular expressions and what those characters will do for you. For example, the dollar sign character marks the end of an input or a line. So typing in h with a dollar sign would match h in the word teach, but not in teacher because the h isn't at the end of the input or the end of a specific line. So you can get extremely specific with how you write your regular expressions. As you scroll down, I want to point out a regular expression that we are going to use. So the regular expression I am interested in examining here is the x|y. That stands for either x or y, and it's extremely helpful when you are combining multiple objects into a single search. You can see that they are looking for two different colors here: FF0000 or 0000FF. It would match all of those colors that we find, and then you could replace them with one item and we are going to do something very similar to this. So let's close out of our Help file and we will go back and we are still working in that index, that HTM file from the Chapter 1 files. I want to point out exactly where our problem is here. We can see the Featured Painting has a brilliant blue headline, and as I scroll down, the Favorite Galleries has an orange headline. Well, they are both wrong.
Those headlines are actually supposed to be the same color as our red heading section up here. So we need to change that. They are being driven through-- let me switch over to Code View so that we can see this. They are being driven through embedded styles on the page. Now, if you completed the earlier exercise files along with me, you will notice that our Style tag is collapsed, because if you remember earlier when we were looking at the Coding toolbar, we collapsed that. Dreamweaver does remember this. So I am going to double click on that to expand it back out.
You can see, our colors here are 00F and F90, and neither of those are correct. It wouldn't take me very long to fix them, but what if they were this way in every file in the site? So I am going to go up to Edit and choose Find and Replace and bring that dialog box back up. Now this time, I just want to do our current document, because it really isn't like that in the rest of them, so I just want to do the Current Document. I am also going to look in Source Code for our search this time, instead of looking for a specific tag.
Now, I can just type in both of those colors and I don't really have to include the # symbol, because I am just wanting to replace those literal strings. So I am going to type in 00F, and here is where we need to choose whether we are going to be case sensitive or not, and that's really an option that we have in our Find and Replace. Now directly after that, I am going to type in the Pipe character and if you are unfamiliar with that, you can find it just above the Return or the Enter key, and you have to hold the Shift key down to get it obviously. So I am going to type in 00F, and then my pipe character and then I am going to type in f90. Now, I am not interested in matching the case, so from my options down here I am not going to use Match Case. However, I am going to grab the checkbox down here that says Use Regular Expression. If I had not checked that, I would be looking for this exact string, 00f|f90, and it's not going to find that anywhere, but now it will recognize that pipe character as part of the regular expression and it will search for those two strings. I am going to replace it with an actual color that we need, which happens to be d52e36. Now, if I hit Find Next, it will find that, and if I choose Replace, you can see that it goes ahead and replaces that out. If I hit Replace All, of course it's only going to find it one additional time. So I will close my Results dialog box and I will switch over to Design View, and sure enough, both the top heading and the bottom heading in those two sections now is the proper color. By using a regular expression, I was able to do that using one search instead of multiple searches, and I could have done that for this page obviously and for every page in my site. So that's a little bit about regular expressions. Now, our next movie will concentrate on some of the new integration features in the Creative Suite Version 3 that I am particularly excited about.
- Reviewing and customizing the coding toolbar
- Understanding the CSS Styles panel
- Using absolute and relative positioning
- Creating accessible forms
- Building AJAX pages with the Spry framework
- Extending templates
- Working with XML and XSL
- Building dynamic content
- Creating custom behaviors in Dreamweaver
- Running reports