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:

SNAGHTML24e1e3f9

and click Find. If any match is find, it will be displayed in the Find Results window:

SNAGHTML19ba5077

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:

SNAGHTML19d7db58

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

image

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:

image

resulting in

image

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:

SNAGHTML1a0a7f45

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:

SNAGHTML1a0bedc0

In our case, we’re going to leave the defaults. Once complete, we can click Find once again to get the results:

SNAGHTML1a0d03b0

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:

SNAGHTML1a128a6c

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.

This entry was posted in ReSharper Tips&Tricks and tagged , , , . Bookmark the permalink.

4 Responses to Searching for Patterns in HTML using ReSharper 6

  1. James Manning says:

    Anything new around SSR in R# 7?

  2. Andrey Shchekin says:

    I feel it is an extremely complicated solution for a problem that already has simple one.

    In C#, if I search for a type, I do not use “class $type$” SSR, I just press Ctrl+T and enter the name.

    In HTML, if I search for an element, shouldn’t it be just some text box with CSS or XPath query? You can actually specify most of the filters (one attribute or more, contains class or equals class) pretty easily in CSS query, most people already know the syntax, and you do not need to setup each placeholder separately.

  3. Hadi Hariri says:

    @James

    We are working on improvements in SSR for 7, yes.

  4. Hadi Hariri says:

    @Andrey

    The main idea behind SSR is not the search but the replacements which ultimately is leading to custom code analysis for detecting smells, etc. I’ll be getting to that in the second part.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>