CSSセレクターからHTMLを検索する正規表現をサクッと生成 - Selector2Regexp

Selector2Regexpは、CSSセレクターからHTMLを検索するための正規表現を生成する、とてもシンプルなコマンドラインツールです。

つい先日、v1.0.0-beta.4 をリリースしました。
https://github.com/m-yoshiro/Selector2Regexp

特徴

• セレクターとマッチするHTMLを検索するのに有効な正規表現を生成します
• 基本的なセレクターはほぼ網羅しています
• +,~などの結合子にも対応しています

使い方

# Installation
$ npm i -g selector-2-regexp

$ s2r '.button'
# => HTMLを検索する正規表現が出力される

僕自身は、クリップボードと併用することが多いです。
以下のようにクリップボードへ結果を渡して、VS Codeの検索窓に貼り付けて使ってます。

$ s2r 'div.example' | pbcopy

上の結果をVS Codeに貼り付けてみた様子がこちら。

利用シーン

僕は主に、フロントエンドのリファクタリングで使っています。古いCSSやJavaScriptをリファクタリングするとき、参照しようとするHTML要素を検索で探す機会が頻繁に発生します。
コード検索ではよく正規表現を使いますが、込み入った条件だと頭で覚えておくことができません。
そんな時に、CSSセレクターと同じ要領で特定の条件のHTML要素を検索できる正規表現をサクッと作れると便利です。

まとめ

• Selector2RegexpはCSSのセレクターからHTMLを検索するための正規表現を生成するコマンドラインツールです。
• フロントエンドのリファクタリングで、CSSやJSが参照しているHTMLを探すのに便利です。

地味なツールではございますが、お試しいただけると嬉しいです。

https://github.com/m-yoshiro/Selector2Regexp
(もし動かない、という場合はNode.js v14以上でお試しください 🙏 )
(追記：上記の問題、v1.0.0-beta.5で修正しました）