All Projects → syntax-tree → unist-util-select

syntax-tree / unist-util-select

Licence: MIT License
utility to select unist nodes with CSS-like selectors

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to unist-util-select

hast-util-select
utility to add `querySelector`, `querySelectorAll`, and `matches` support for hast
Stars: ✭ 20 (-51.22%)
Mutual labels:  select, util, matches, queryselector, selectall
unist-util-inspect
utility to inspect nodes
Stars: ✭ 16 (-60.98%)
Mutual labels:  util, unist, unist-util
unist-util-visit-parents
utility to recursively walk over unist nodes, with ancestral information
Stars: ✭ 25 (-39.02%)
Mutual labels:  util, unist, unist-util
unist-util-map
utility to create a new tree by mapping all nodes
Stars: ✭ 30 (-26.83%)
Mutual labels:  util, unist, unist-util
unist-builder
utility to create a new trees with a nice syntax
Stars: ✭ 52 (+26.83%)
Mutual labels:  util, unist, unist-util
hast-util-to-html
utility to serialize hast to HTML
Stars: ✭ 47 (+14.63%)
Mutual labels:  util, unist
hast-util-to-mdast
utility to transform hast (HTML) to mdast (markdown)
Stars: ✭ 26 (-36.59%)
Mutual labels:  unist, unist-util
hast-util-from-dom
utility to transform a DOM tree to hast
Stars: ✭ 20 (-51.22%)
Mutual labels:  util, unist
nlcst-to-string
utility to transform an nlcst tree to a string
Stars: ✭ 16 (-60.98%)
Mutual labels:  util, unist
mdast-util-to-string
utility to get the plain text content of an mdast node
Stars: ✭ 27 (-34.15%)
Mutual labels:  util, unist
remark-retext
plugin to transform from remark (Markdown) to retext (natural language)
Stars: ✭ 18 (-56.1%)
Mutual labels:  remark, retext
hast-util-sanitize
utility to sanitize hast nodes
Stars: ✭ 34 (-17.07%)
Mutual labels:  util, unist
laravel-simple-select
Laravel Simple Select inputs component for Blade and Livewire.
Stars: ✭ 59 (+43.9%)
Mutual labels:  select
vue-single-select
single select dropdown with autocomplete
Stars: ✭ 43 (+4.88%)
Mutual labels:  select
transformer-oembed
@remark-embedder transformer for oEmbed supported links
Stars: ✭ 25 (-39.02%)
Mutual labels:  remark
remark-highlight.js
Legacy plugin to highlight code blocks with highlight.js — please use `rehype-highlight` instead
Stars: ✭ 58 (+41.46%)
Mutual labels:  remark
xm2cloud term
powerful webssh that developed with django, channels, xterm,ioloop
Stars: ✭ 17 (-58.54%)
Mutual labels:  select
hierarchy-select
Hierarchy Select jQuery Plugin for Twitter Bootstrap
Stars: ✭ 40 (-2.44%)
Mutual labels:  select
toyhttpd
I/O 模型练手代码,分别使用阻塞式 I/O、select、poll 和 epoll 和 Java NIO 实现了简单的 HTTP Server
Stars: ✭ 43 (+4.88%)
Mutual labels:  select
slackify-markdown
Convert markdown into Slack-specific markdown
Stars: ✭ 80 (+95.12%)
Mutual labels:  remark

unist-util-select

Build Coverage Downloads Size Sponsors Backers Chat

unist utility with equivalents for querySelector, querySelectorAll, and matches.

Note that the DOM has references to their parent nodes, meaning that document.body.matches(':last-child') can be evaluated. This information is not stored in unist, so selectors like that don’t work.

View the list of supported selectors »

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install unist-util-select

API

This package exports the following identifiers: matches, select, selectAll. There is no default export.

matches(selector, node)

Check that the given node matches selector. Returns boolean, whether the node matches or not.

This only checks the element itself, not the surrounding tree. Thus, nesting in selectors is not supported (paragraph strong, paragraph > strong), nor are selectors like :first-child, etc. This only checks that the given element matches the selector.

import {u} from 'unist-builder'
import {matches} from 'unist-util-select'

matches('strong, em', u('strong', [u('text', 'important')])) // => true
matches('[lang]', u('code', {lang: 'js'}, 'console.log(1)')) // => true

select(selector, tree)

Select the first node matching selector in the given tree (could be the tree itself). Returns the found node, if any.

import {u} from 'unist-builder'
import {select} from 'unist-util-select'

console.log(
  select(
    'code ~ :nth-child(even)',
    u('blockquote', [
      u('paragraph', [u('text', 'Alpha')]),
      u('paragraph', [u('text', 'Bravo')]),
      u('code', 'Charlie'),
      u('paragraph', [u('text', 'Delta')]),
      u('paragraph', [u('text', 'Echo')])
    ])
  )
)

Yields:

{type: 'paragraph', children: [{type: 'text', value: 'Delta'}]}

selectAll(selector, tree)

Select all nodes matching selector in the given tree (could include the tree itself). Returns all found nodes, if any.

import {u} from 'unist-builder'
import {selectAll} from 'unist-util-select'

console.log(
  selectAll(
    'code ~ :nth-child(even)',
    u('blockquote', [
      u('paragraph', [u('text', 'Alpha')]),
      u('paragraph', [u('text', 'Bravo')]),
      u('code', 'Charlie'),
      u('paragraph', [u('text', 'Delta')]),
      u('paragraph', [u('text', 'Echo')]),
      u('paragraph', [u('text', 'Foxtrot')]),
      u('paragraph', [u('text', 'Golf')])
    ])
  )
)

Yields:

[
  {type: 'paragraph', children: [{type: 'text', value: 'Delta'}]},
  {type: 'paragraph', children: [{type: 'text', value: 'Foxtrot'}]}
]

Support

  • * (universal selector)
  • , (multiple selector)
  • paragraph (type selector)
  • blockquote paragraph (combinator: descendant selector)
  • blockquote > paragraph (combinator: child selector)
  • code + paragraph (combinator: adjacent sibling selector)
  • code ~ paragraph (combinator: general sibling selector)
  • [attr] (attribute existence, checks that the value on the tree is not nullish)
  • [attr=value] (attribute equality, this stringifies values on the tree)
  • [attr^=value] (attribute begins with, only works on strings)
  • [attr$=value] (attribute ends with, only works on strings)
  • [attr*=value] (attribute contains, only works on strings)
  • [attr~=value] (attribute contains, checks if value is in the array, if there’s an array on the tree, otherwise same as attribute equality)
  • :any() (functional pseudo-class, use :matches instead)
  • :has() (functional pseudo-class) Relative selectors (:has(> img)) are not supported, but :scope is
  • :matches() (functional pseudo-class)
  • :not() (functional pseudo-class)
  • :blank (pseudo-class, blank and empty are the same: a parent without children, or a node without value)
  • :empty (pseudo-class, blank and empty are the same: a parent without children, or a node without value)
  • :root (pseudo-class, matches the given node)
  • :scope (pseudo-class, matches the given node)
  • * :first-child (pseudo-class)
  • * :first-of-type (pseudo-class)
  • * :last-child (pseudo-class)
  • * :last-of-type (pseudo-class)
  • * :only-child (pseudo-class)
  • * :only-of-type (pseudo-class)
  • * :nth-child() (functional pseudo-class)
  • * :nth-last-child() (functional pseudo-class)
  • * :nth-last-of-type() (functional pseudo-class)
  • * :nth-of-type() (functional pseudo-class)
Notes
  • * — Not supported in matches

Related

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Eugene Sharygin

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].