.NET Tools
Essential productivity kit for .NET and game developers
Searching for Patterns in HTML using ReSharper 6
In ReSharper 5, we added a feature called Structural Search and Replace (SSR). You could think of it as a cross between Regular Expressions and Templating, with the added benefit that you don’t need to know RegEx to use it. The basic idea behind it is to allow you to extend ReSharper’s code analysis by defining custom patterns, and optionally providing quick-fixes (for replacing these with other patterns).
In ReSharper 6.1, we extended SSR with support for other languages, specifically HTML and ASPX markup.
Let’s take a look at how this can help us with web applications we work on.
Searching for specific tags
Often you want to search for tags in your markup, for instance a div that is using a specific class. With ReSharper, we could search for the usages of the CSS class and filter it out, or as in the case we’re covering, use SSR. To do so:
1. Click on ReSharper | Find | Search with Pattern.
2. Select HTML from the drop-down list and enter the following pattern below:
and click Find. If any match is find, it will be displayed in the Find Results window:
Looking at the results, we can see that it not only finds patterns that match the exact class=”corner” pattern, but also anything that uses the corner class. The reason for that is that we have the option Match similar constructs selected. Deactivating that would result in displaying only exact pattern matches:
It is important to know that with the previous search, a div tag of the format <div class=”corner” id”=”submenu”> would appear in the results. That is because we have Ignore unmatched elements selected. If we’d like the pattern to include tags that have other attributes not explicitly defined, we need to check this option.
Using CSS selectors to search for patterns
If you’re doing any kind of web development, you’ve no doubt used or at least heard of CSS selectors, which probably many learned to master when they worked with jQuery (including myself). Well that same power of CSS selectors is also available in ReSharper for searching for tags.
1. Enter the following pattern in the Find dialog
The values enclosed in $ signs are placeholders required for Structural Search and Replace, and the next step is to define them.
2. Instead of manually setting placeholder properties, we can use the newer feature of ReSharper that allows us to extract them from the pattern:
resulting in
3. We now have to define the different meanings of each placeholder. This is where the CSS selector comes into play. For the tag attribute, we’re going to define it as a tag with a selector:
The attribute placeholder can also have certain conditions such as matching a regular expression or indicating the number of attributes we want to have as a minimum and maximum:
In our case, we’re going to leave the defaults. Once complete, we can click Find once again to get the results:
Of course, now that we have CSS selectors, we can take it further. For instance, to search for all p inside a div that has a class corner we can do:
Any CSS selector expression is valid.
Apart from tags and attributes, we can also have attribute value and content placeholders, and in the case of the latter, we can also use CSS selectors to define the contents.
More to come
In this first part on HTML patterns, we’ve seen how to search for patterns in HTML using both markup patterns as well as CSS selectors. However, it doesn’t stop there. We can perform replacements as well as save patterns so as to offer custom code analysis and quick-fixes. However, as the post is already long enough, we’ll save that for the second part.
Subscribe to a monthly digest curated from the .NET Tools blog:
