<p>Selector2Regexpは、<strong>CSSセレクターからHTMLを検索するための正規表現を生成する</strong>、とてもシンプルなコマンドラインツールです。</p>
<p>つい先日、v1.0.0-beta.4 をリリースしました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6f1d45491aec" src="https://embed.zenn.studio/card#zenn-embedded__6f1d45491aec" data-content="https%3A%2F%2Fgithub.com%2Fm-yoshiro%2FSelector2Regexp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/m-yoshiro/Selector2Regexp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/m-yoshiro/Selector2Regexp</a></p>
<h1 id="%E7%89%B9%E5%BE%B4">
<a class="header-anchor-link" href="#%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 特徴</h1>
<ul>
<li>セレクターとマッチするHTMLを検索するのに有効な正規表現を生成します</li>
<li>基本的なセレクターはほぼ網羅しています</li>
<li>
<code>+</code>,<code>~</code>などの結合子にも対応しています</li>
</ul>
<h1 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h1>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token comment"># Installation</span>
$ <span class="token function">npm</span> i <span class="token parameter variable">-g</span> selector-2-regexp

$ s2r <span class="token string">'.button'</span>
<span class="token comment"># =&gt; HTMLを検索する正規表現が出力される</span>
</code></pre></div><p>僕自身は、クリップボードと併用することが多いです。<br>
以下のようにクリップボードへ結果を渡して、VS Codeの検索窓に貼り付けて使ってます。</p>
<div class="code-block-container"><pre><code>$ s2r 'div.example' | pbcopy
</code></pre></div><p>上の結果をVS Codeに貼り付けてみた様子がこちら。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/q4fw6n2io7hveulprk46wz7swtfd" alt loading="lazy" class="md-img"></p>
<h1 id="%E5%88%A9%E7%94%A8%E3%82%B7%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E5%88%A9%E7%94%A8%E3%82%B7%E3%83%BC%E3%83%B3" aria-hidden="true"></a> 利用シーン</h1>
<p>僕は主に、フロントエンドのリファクタリングで使っています。古いCSSやJavaScriptをリファクタリングするとき、参照しようとするHTML要素を検索で探す機会が頻繁に発生します。<br>
コード検索ではよく正規表現を使いますが、込み入った条件だと頭で覚えておくことができません。<br>
そんな時に、CSSセレクターと同じ要領で特定の条件のHTML要素を検索できる正規表現をサクッと作れると便利です。</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<ul>
<li>Selector2RegexpはCSSのセレクターからHTMLを検索するための正規表現を生成するコマンドラインツールです。</li>
<li>フロントエンドのリファクタリングで、CSSやJSが参照しているHTMLを探すのに便利です。</li>
</ul>
<p>地味なツールではございますが、お試しいただけると嬉しいです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__074e6b260612" src="https://embed.zenn.studio/card#zenn-embedded__074e6b260612" data-content="https%3A%2F%2Fgithub.com%2Fm-yoshiro%2FSelector2Regexp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/m-yoshiro/Selector2Regexp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/m-yoshiro/Selector2Regexp</a><br style="display:none">
<s>(もし動かない、という場合はNode.js v14以上でお試しください 🙏 )</s><br>
(追記：上記の問題、v1.0.0-beta.5で修正しました）</p>


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

m-yoshiro

<p>Node.js V14より下のバージョンで動作しない問題を修正しました。(v13以下だとexperimentalWarningが出る状況ですが。。)</p>


Discussion