
HTMLの中にあるコメントをすべて削除したい。
このようなことってありますよね。
今回は、VSCodeでHTMLの全コメントを一気に消す方法を紹介します。
HTMLのコメントを一括削除する方法
1. HTMLファイルを VSCode で開きます。

2. [Ctrl] + [F] キーを押して、検索バーを開きます。

3. 検索バーに “<!–(.*?)–>” と入力します。

4. 正規表現を使用するためのオプションを有効にします。

5. 左側にある >マークを クリックして、置換オプションを開きます。

6. 全置換のアイコンをクリックして、置換を実行します。

これでHTML内にある全てのコメントを一括で削除する事ができます。
残った空白行を消すには
この方法で全コメントを消すと、元々コメントがあった行が残ってしまいます。
これは空白の行です。
この空白行を消すには、[Ctrl] + [F] キーを押して検索バーを開き、
検索欄 → ^\n 置換欄→ 空白のまま
のようにそれぞれ入力後、全置換のアイコンを押します。

これで余計な空白行が消えます。
検索欄に入力した記号の意味
検索欄に入力した <!–(.*?)–> の意味は、あらゆるコメントを検索するという意味です。
(.*?) の部分は正規表現と呼ばれます。
記号は個別に意味があります。
. | 任意の1文字にマッチする |
* | 「直前のパターンが1回以上出現する」という意味を付加する |
? | 「直前のパターンが0回か1回出現する」という意味を付加する |
正規表現は「こんな検索したい!」っていう特殊な願望が叶えられて便利です。
他の場面でも使ってみてください。
コメント