Stripping down old code using Dreamweaver
I recently acquired a job to re-write an existing web application that was written in “old” HTML code. You know the sort, inline styling, unnecessary tags, weird classes, table based layouts nested to the nth degree, etc, etc.
Rather than starting writing shiny new XHTML from scratch, I thought I’d make use of some of Dreamweaver’s capabilities for batch processing and find and replace functionality.
Looking into “Regular Expressions”, I found the answer.
Start by choosing the files you want to strip down. I’ve set up a basic example here showing just 3 HTML files under a Project called “old site html”. In reality you’d probably have a lot more to make use of the batch process.
Select the directory containing all the files you want to strip down (As shown above) and select “Find and Replace…” from the Edit menu.
The Find and Replace window is pretty straight forward.
- Make sure that “Find in” is set to “Selected Files in Site”. If you forgot to select the directory you can always use the “Folder…” option here. I was just trying to save you a few clicks!
- Search should be set to “Source Code”
- Then make sure you check the “Use regular expression” checkbox at the bottom
Now comes the trickier part. Regular expressions. Let’s start with the table tag. The follow expression will select an entire table tag, including all it’s attributes.
<table [^>]*>
Enter this expression into the “Find” field and then enter the following into the “Replace” field.
<table>
Test the expression by clicking “Find Next”. You’ll see that it’ll open up the first matching document with the first table tag selected.
Click “Replace” and the table tag will be stripped of it’s ugly, old attributes and the next match will be found. If you’re feeling confident enough, just click “Replace All” to strip all table tags in the selected folder.
You can adapt this method for different tags or opt for a catch all solution using this expression:
Find:
(<)([A-Za-z]+) ([^>]*>)
Replace:
<$2>
This will catch any tag and strip out it’s attributes leaving the existing tag in place. It uses sub expressions which can get a little complex. You should also bear in mind that there are some attributes that you will not want to strip out! (e.g. colspan, rowspan).
For further reading on Regular Expressions in Dreamweaver (including sub expressions), see Rob Christensen’s article on the Adobe website.
February 15th, 2007 at 11:34 am
Thanks for this quick intro Paul. I’ve had loads of situations where Regular Expressions in Dreamweaver would speed things up for me, but it’s always when I’m too busy to learn the expression I need. I’m sure you know what I mean.
March 2nd, 2007 at 10:55 pm
I finally found your reference to this in the StyleGala forum. I’ve never noticed that little checkbox in the Dreamweaver F&R. Thanks for the nice tip. Oh boy! a new thing to play with.
March 5th, 2007 at 4:13 pm
Regex is great, but I’ve never quite got my head around it. Hurray for programmers in the office who can give help me wrtie them when I need it.
Another great feature of Dreamweaver’s find and replace it’s the ability to find specific tags. You could do something similar by clicking tags in the “Search:” drop down and selecting table and remove tag. The tag search is very powerful indeed and great for messing around with HTML.