-
-
Notifications
You must be signed in to change notification settings - Fork 161
Description
I'm attempting to extract attributes of a certain type from a webpage, then reconstruct a JS object showing where they appeared in the original tree.
For example, I want to go from this input:
<div data-test='a'>
<div data-test='b'></div>
<div data-test='c'>
<div data-test='d'></div>
</div>
</div>
to
{
a: {
b: null,
c: {
d: null
}
}
}
The language in question is https://github.com/phoenixframework/tree-sitter-heex and I'm using this query:
const query = new Parser.Query(PhoenixHeexParser, `(
(attribute
(attribute_name) @attribute-name
(quoted_attribute_value
(attribute_value) @attribute-value
)
)
(#eq? @attribute-name "data-test")
)`);
const captures = query.captures(tree.rootNode)
.filter((match) => match.name === 'attribute-value');
console.log(captures.map(c => tree.getText(c.node)));
This correctly outputs the ['a', 'b', 'c', 'd'], but there doesn't appear to be any obvious way to gather their relative positions to each other.
What I've been trying to do is look at each matching capture's node and repeatedly use .parent and attempt to find a parent of one match that is the node from another match. But I can't figure out how to verify I've found the right node. And I suspect there's a better way... but documentation on tree-sitter is very sparse, especially on this node implementation. Comparing the text doesn't work, since the node text will have extraneous information (and it isn't guaranteed to be unique)
It might even be possible to do this with the original query itself, but I didn't see anything in the documentation that suggested this would be possible.