hast-util-from-selector

!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
hast utility to create nodes from a complex CSS selectors.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API

*   [`fromSelector(selector?[, options])`](#fromselectorselector-options)
*   [`Options`](#options)
*   [`Space`](#space)

• Support
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a utility that can generate elements from complex CSS selectors.

When should I use this?

You can use this when you’re generating a bunch of elements, and manually creating objects each time is starting to feel like a waste. This package is much more powerful than hast-util-parse-selectorhast-util-parse-selector, and similar to hastscripthastscript.

Install

This package is ESM onlyesm. In Node.js (version 16+), install with npm:

npm install hast-util-from-selector

In Deno with esm.shesmsh:

import {fromSelector} from 'https://esm.sh/hast-util-from-selector@3'

In browsers with esm.shesmsh:

<script type="module">
  import {fromSelector} from 'https://esm.sh/hast-util-from-selector@3?bundle'
</script>

Use

import {fromSelector} from 'hast-util-from-selector'

console.log(fromSelector('p svg[viewbox="0 0 10 10"] circle[cx=10][cy=10][r=10]'))

Yields:

{
  type: 'element',
  tagName: 'p',
  properties: {},
  children: [
    {
      type: 'element',
      tagName: 'svg',
      properties: {viewBox: '0 0 10 10'},
      children: [
        {
          type: 'element',
          tagName: 'circle',
          properties: {cx: '10', cy: '10', r: '10'},
          children: []
        }
      ]
    }
  ]
}

API

This package exports the identifier fromSelectorapi-from-selector. There is no default export.

fromSelector(selector?[, options])

Create one or more Elementelements from a CSS selector.

Parameters

• selector (string, default: '')

— CSS selector

• options (Optionsapi-options, optional)

— configuration

Returns

Elementelement.

Options

Configuration (TypeScript type).

Fields

• space (Spaceapi-space, default: 'html')

— which space first element in the selector is in.
When an `svg` element is created in HTML, the space is automatically
switched to SVG

Space

Name of namespace (TypeScript type).

Type

type Space = 'html' | 'svg'

Support

• x * (universal selector, creates a div in HTML, g in SVG)
• x p (type selector)
• x .class (class selector)
• x #id (id selector)
• x [attr] (attribute existence, creates a boolean)
• x [attr=value] (attribute equality)
• x article p (descendant combinator)
• x article > p (child combinator)
• x section h1 + p (next-sibling combinator, not at root)
• x section h1 ~ p (subsequent-sibling combinator, not at root)

Types

This package is fully typed with TypeScript. It exports the additional types Optionsapi-options and Spaceapi-space.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, hast-util-from-selector@^3, compatible with Node.js 16.

Security

Use of hast-util-from-selector can open you up to a cross-site scripting (XSS)xss attack as values are injected into the syntax tree.
Either do not use user input in from-selector or use hast-util-santizehast-util-sanitize.

Related

• hast-util-parse-selector

— create an element from a simple CSS selector

Contribute

See contributing.mdcontributing in syntax-tree/.githubhealth for ways to get started. See support.mdsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MITlicense © Titus Wormerauthor