かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

VScodeで使える便利な正規表現での検索・置換

2022年1月11日

正規表現

Command + F で開いているファイルの検索を開くことができます。
検索する際に、「.*」をクリックして選択しておくと、正規表現での検索になります。

正規表現説明
<p>(.+)</p>特定文字列の中身を検索(この場合は <p>この部分</p>

<p>$1</p>、置換をする場合に、検索の際に()で囲んだ位置を$1,$2と検索位置の順番で使うことができます。

置換をするには、左の矢印をクリック。


検索

<p class="(.*)" id="(.*)">hoge</p>

<p class="hoge" id="fuga">hoge</p>
<p class="aaa" id="bbb">hoge</p>
<p class="ccc" id="ddd">hoge</p>

置換と結果

<p class="$2" id="$1">hoge</p>

<p class="hoge" id="fuga">hoge</p>
<p class="aaa" id="bbb">hoge</p>
<p class="ccc" id="ddd">hoge</p>

複数行の検索について

上のコードは複数行にまたがった検索をすることができません。 その場合は下記の正規表現を使うことで検索することができます。

正規表現説明
<p>[\s\S\n]*?</p>複数業特定文字列の中身を検索(この場合は <p>この部分</p>
<p>
  こんにちは
  よろしくおねがいします。
</p>

<p>
  あけまして
  おめでとうございます。
</p>

<p>
  ことしも
  よろしくおねがいします。
</p>

検索部分を複数カーソル選択

検索した範囲をCmmand + Dを押したときと同じようにカーソルを全選択するショートカットもあります。

ショートカット説明
Command + Shift + L検索した範囲にCommand + Dと同じようにカーソル全選択

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事