Finding arbitrary HTML nodes that have specific attributes with specific value

[hitochan777]

I want to find arbitrary html nodes that have class="foo" from a HTML that looks like follows.

<div>
  <article class="foo">
    Lorem ipsum....
  </article>
  <p class="bar">
    Lorem ipsum....
  </p>
  <div class="foo">
    Lorem ipsum....
  </div>
</div>

To do so, I ran the following command but I get an empty result.
What am I missing?

ast-grep --pattern '<$TAG class="foo">$$$</$TAG>' index.html

[HerringtonDarkholme]

tree-sitter does not allow $ in tagname.

https://ast-grep.github.io/playground.html#eyJtb2RlIjoiUGF0Y2giLCJsYW5nIjoiaHRtbCIsInF1ZXJ5IjoiPCRUQUcgY2xhc3M9XCJmb29cIj4kJCQ8LyRUQUc+IiwicmV3cml0ZSI6IiRBPy4oKSIsImNvbmZpZyI6IiIsInNvdXJjZSI6IjxkaXY+XG4gIDxhcnRpY2xlIGNsYXNzPVwiZm9vXCI+XG4gICAgTG9yZW0gaXBzdW0uLi4uXG4gIDwvYXJ0aWNsZT5cbiAgPHAgY2xhc3M9XCJiYXJcIj5cbiAgICBMb3JlbSBpcHN1bS4uLi5cbiAgPC9wPlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+XG4gICAgTG9yZW0gaXBzdW0uLi4uXG4gIDwvZGl2PlxuPC9kaXY+In0=

you can use yaml instead.https://ast-grep.github.io/guide/rule-config.html

[hitochan777]

I tried the following yaml but not working.
I guess this is because the pattern in yaml file is also parsed by tree-sitter.
Can you please clarify how I can achieve my goal with yaml file 🙇?

id: node_with_foo_class
language: HTML 
rule:
  pattern: |
    <$TAG class="foo">$$$</$TAG>

[HerringtonDarkholme]

I mean you can avoid using $TAG as a tag name in pattern and use YAML to directly find the attribute. Then find the element having that attribute. All these steps can be composed by YAML rules.

This is done by several step:

1. Use Pattern Object to find class="foo" https://ast-grep.github.io/guide/rule-config/atomic-rule.html#pattern
   this is the critical step that we avoid the $TAG
2. Use kind: element to find the HTML element and has to find the element containing the attribute. (But note it does not work since has by default only searches direct children)
3. Fine-tune the pattern, stopBy can instruct ast-grep to find descendants. In this case, we want to only find elements that have attributes by itself, not their children containing specific attributes. So stopBy: end does not work. We need to say "find element that has class='foo', but stop finding if encountering sub child element with kind: element"

The final rule

rule:
  kind: element
  has:
    pattern:
      context: <div class="foo"/>
      selector: attribute
    stopBy: {kind: element}

Playground
https://ast-grep.github.io/playground.html#eyJtb2RlIjoiQ29uZmlnIiwibGFuZyI6Imh0bWwiLCJxdWVyeSI6IjwkVEFHIGNsYXNzPVwiZm9vXCI+JCQkPC8kVEFHPiIsInJld3JpdGUiOiIkQT8uKCkiLCJjb25maWciOiJydWxlOlxuICBraW5kOiBlbGVtZW50XG4gIGhhczpcbiAgICBwYXR0ZXJuOlxuICAgICAgY29udGV4dDogPGRpdiBjbGFzcz1cImZvb1wiLz5cbiAgICAgIHNlbGVjdG9yOiBhdHRyaWJ1dGVcbiAgICBzdG9wQnk6IHtraW5kOiBlbGVtZW50fSIsInNvdXJjZSI6IjxkaXY+XG4gIDxhcnRpY2xlIGNsYXNzPVwiZm9vXCI+XG4gICAgTG9yZW0gaXBzdW0uLi4uXG4gIDwvYXJ0aWNsZT5cbiAgPHAgY2xhc3M9XCJiYXJcIj5cbiAgICBMb3JlbSBpcHN1bS4uLi5cbiAgPC9wPlxuICA8ZGl2IGNsYXNzPVwiZm9vXCI+XG4gICAgTG9yZW0gaXBzdW0uLi4uXG4gIDwvZGl2PlxuPC9kaXY+In0=

[HerringtonDarkholme]

I found a workaround to make this workflow better.

I think I can optimize the workflow in future release. Keep tuned.

[hitochan777]

Thank you!
Pattern object is really powerful.

[HerringtonDarkholme]

@hitochan777 ast-grep 0.19.4 makes the pattern command work!

ast-grep --pattern '<$TAG class="foo">$$$</$TAG>' index.html

[hitochan777]

@HerringtonDarkholme
Wonderful! This is much simpler.
I appreciate your quick response.