laden666666 / selector2regexp

Transform CSS Selector to a Regexp string for searching matched elements in HTML.

Selector2Regexp

Transform CSS Selector to a Regexp string for searching matched elements in HTML.

NOTE：This tool is an experiment.

• Generated regexps only work JavaScript based environments. ex. VSCode, Node.js, Chrome..
• Generated regexps contain ES2018's features. "Lookbehind assertion" and "Negative lookbehind assertion".
  Please check their statements:
  https://caniuse.com/#feat=mdn-javascript_builtins_regexp_lookbehind_assertion,

Install

npm i selector-2-regexp

Usage

s2r '.button'
# => class=['"]\w*\s*(?<!\w)(button)(?!\w)\s*\w*['"]

# Save to clipboard
s2r '.button' | pbcopy

Supported selector patterns

• Single selector

  # Type Selector
  s2r 'div'
  
  # Classs Selector
  s2r '.single'
  
  # Id Selector
  s2r '#app'
  
  # Attribute Selector
  s2r '[hidden]'
  s2r '[data-state=active]'
  s2r '[data-state*=active]'
  s2r '[data-state~=active]'
  s2r '[data-state^=active]'
  s2r '[data-state$=active]'

• Descendant selector

  s2r '.parent .child'

• Multiples

  s2r '.button.button--primary'
  s2r 'div.panel.flex'