Aggiorno Smart Search and Replace Quick Start Tutorial
A Find and Replace that understands markup
As a web developer you find yourself in situations when you need to replace lots of repetitive html with new markup. When you think about a task like this the first thing that comes to mind is regular expressions. Even though regular expressions are a great tool, they have their drawbacks with recognizing patterns in html. First of all, because they work on plain text, regular expressions don’t take advantage of the hierarchical nature of html. Another issue with regular expressions is that every character is taken into account for the pattern matching, so you always have to take care of the white spaces, new lines and case sensitivity in order to get the pattern to match as much cases as possible. Chances are that, although you may think you need to make a very simple search and replace, you will end up writing a quite complex regular expression.
The following examples can be excised in the file Accessibility.html.
Let’s say that we need to change all the b tags followed by an i tag and replace them with a span that has bold and italic in its style attribute, and you want to preserve the content inside the i tag, The regular expression that performs this task is described below.
Regular Expression.
Figure 1. Common Regular Expression Search.
Replacement
Figure 2. Regular Expression Replacement.
What are the problems with this regular expression?
- If the b or i tags had any attributes the pattern wouldn’t match.
- You have to make sure that the search is case insensitive.
- It only matches sequences in a single line.
- If you use a multiple line regular expression it will only match the first appearance of opening tags (<b><i>) and the last appearance of closing tags (</i></b>) .
Of course you can make the regular expression work for most cases but it’s going to be a time consuming task and you will probably end up with a big regular expression. Now let’s take a look at how Aggiorno Smart Search and Replace would work for this case. From now, wherever you see in this tutorial “Search Pattern” and “Replace Pattern”, they will refer to the fields labeled as such in the dialog of “Smart Search and Replace” of Aggiorno as viewed in the following snapshot:
Aggiorno’s Smart Search and Replace can be invoked from the main menu and context menus.
Moving forward, let’s analyze the way to solve the problem of replacing b and i elements with customized span using Aggiorno’s Search and Replace:
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
- The pattern describes exactly what we meant in very readable way:
- Finds all the occurrences of the b, which has an i as its only child node.
- Store all of the i tag child nodes in a variable named content.
- Matches any b or i regardless of their attributes.
- Meaningless characters are ignored.
- The tags stored in the $content variable are preserved by using them in the replacement.
Aggiorno’s Smart Search and Replace components introduced:
- Recognizes specific tags by declaring them in the pattern
- To match a tag Aggiorno’s Smart Search and Replace does not require the declaration of its attributes.
- The declaration $content… can be split in two parts
- $content, denotes a variable where nodes are going to be stored.
- ..., means that there is no restriction on the number of child nodes that i can have, and all of them, even none, are going to be stored in $content.
- If $content, appears without the ellipsis (…), it means that only one node can appear in the position where $content is, and if there aren’t nodes or there is more then one node the pattern will fail.
The only problem that arises in the former example is that we can lose any attributes that the b or i tags may have had. But this can be easily fixed with the following pattern:
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
What I just did in the example above was to store the attributes of the b tag in the variable $batts and the i attributes in the variable $iatts and in the replacement I’m inserting those attributes into the new span. At this time you may be wondering that this solution is not that good, because in this replacement some invalid or duplicated attributes may find their way into the new span tag.
Aggiorno’s Smart Search and Replace components introduced:
- Variables can be placed inside the tag declaration, such as $batts and $iatts, and all of tag’s attributes will be stored in the variable.
After analyzing the attributes that were inserted in the new span tags, I realized that I want to preserve most of the attributes except for the id attributes. That can be done in the following way.
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
As you can see, the replacement is the same as in the previous example, the difference is that this time neither $batts nor $iatts contain the id attribute. The id attribute is missing because it was explicitly declared in the pattern, and that makes the variables in attribute position to exclude that attribute.
Aggiorno’s Smart Search and Replace components introduced:
- Variables on attribute value position.
- o These attributes declarations pose a new constraint on the tag, that is, that the tag must contain that attribute, such as the id in the previous example.
- o The attribute value is irrelevant for the matching process
- o The attribute value is stored in the variable, like $bid or $iid in the figure 5.
If you need to preserve just some attributes, let’s say that for some reason you only need to preserve the id attribute of the b tag in the new span. The following pattern will do the trick.
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
The id attribute’s value was stored in the $bid variable, then it was used as the value of the span’s id attribute. The variable in attribute position was omitted because it is no longer needed.
But what happens if I only wanted to replace certain b tags, let’s say that I only wanted to perform the replacements for the b tags that have certain class attribute. That can be done too. The example below illustrates this scenario.
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
The sample shown above only will match with b tags that have a class attribute whose value is displayNone, any other b tag is not going to match.
Aggiorno’s Smart Search and Replace components introduced:
- Literal attributes
When an attribute declaration is added to the tag, both, name and value, the pattern searches for the exact match, the node must contain the attribute and the declared value.
Moving a TABLE layout to DIV
The following example can be excised in the file HTMLtoCSS.html. A common task these days is to move old table based layouts to more flexible layouts based on divs and css. I’ll show you a simple pattern that can be used to detect the tables, preserve the content and move the layout to divs.
Search Pattern:
Replace Pattern:
Video Demostration
What does the example do?
The pattern declared in figure 8 matches a table that has a header, a menu and the content that is positioned below the header and right of the menu. Each section is matched and the content is stored in variables.
The replacement creates a div for each section, the content of each section is restored.
If your site has a complex layout you can use several patterns to clean up the mark up and transform the tables incrementally.
Conclusion
With Aggiorno’s Smart Search and Replace you can harness the power of regular expressions with a really simply syntax, highly expressive and specific to HTML markup structure.
Now you can automate your specific repetitive search and replace of markup in a matter of seconds with easy to read patterns.
More sample patterns will be introduced in our blogs.