How to select html elements inside markdown using unist-util-select?

[iamzee]

Lets say I have the following markdown

# Some heading

<div data-something="abc">
Something
<div>

<div data-something="xyz">
</div>

and i have to select that div with a data-something attribute value = "abc" using unist-util-select.. how am i going to achive that?

If I console the node using unist-util-visit, i get the following object

{
  "type": "mdxJsxFlowElement",
  "name": "div",
  "attributes": [
    {
      "type": "mdxJsxAttribute",
      "name": "data-something",
      "value": "abc"
    }
  ],

I can select all thes divs using something like this

import { match } from 'unist-util-select';

const isMatch = matches("mdxJsxFlowElement", node);

but this will select all the divs.. unable to figure out how to select a div with the given data attribute

[wooorm]

Don’t use select. It is likely slower than the better alternative. And the alternative makes your problem trivial to solve: https://github.com/syntax-tree/unist-util-select#when-should-i-use-this.

import {visit} from 'unist-util-visit'

visit(tree, function (node) {
  if (node.type === 'mdxJsxFlowElement' && /* put your extra conditions here */) {
  }
})

[iamzee]

Yes, I have used unist-util-visit, but I was wondering, is there a way to check for that element combining unist-util-select and unist-util-is

[wooorm]

You shouldn’t use unist-util-select as it would be slow if it worked, but it doesn’t work.

unist-util-is accepts any function. So yes: you can use that (you already are, it’s in visit).

But you don’t need to: see the code I posted last week. That works. Use visit. Don’t use other things. Or explain your actual question?

[iamzee]

unist-util-visit does the job for me...just trying to do the same thing using unist-util-select..which i guess doesn't work if I use div or any html element inside markdown(mdx).

[wooorm]

I don’t understand what you’re asking? You can’t use select. If it worked, it would be slow. You shouldn’t want to use it.