コードをいわゆる「置換(置き換え)」、一気に変換したい! って事ありませんか?
「正規表現」を使うと一部の文字を削除したり、抽出したりできて超便利です。
この記事は高機能エディタVS Codeの置換機能で正規表現をある程度使えるようになりたい人、コピペで手軽に置換をしたい人のために書かれた記事です。
VS Codeの使い方、正規表現、置換の基本、よく使う置換のチートシートについて掲載しています。

かみーゆ/フロントエンドエンジニア
使用ツールはVisual Studio Code(以下VS Codeと省略)前提条件として解説を進めていきます。
VS Codeは、制作部をフォルダー単位で管理できたり、コーディングしやすい機能が最初から備わっている、Microsoft発の高機能エディターです。
この記事では深く触れませんので、VS Codeに関する記事も合わせてお読みください。
今回は、単一ファイルの置換方法と複数ファイルの置換方法両方のやり方をご紹介します。
単一ファイル内での置換
ショートカットキー cmd + opt + F (Win cntrl + H)
で置換機能。検索だけしたいときは、ショートカットキーcmd(Win cntrl) + F
。

- 大文字と小文字を区別する
- 単語単位で検索する
- 正規表現を使用する
- 件数
- 頭文字を大文字にする
- 1個だけ置換
- すべてを置換
複数のファイル内での置換
余談ですが検索だけしたいときは、ショートカットキーcmd(Win cntrl) + shift + H
を押すとエディターの右上に検索ボックスが出てきます。ちなみに、ショートカットキーcmd(Win cntrl) + shift + F
でファイル全体の検索ができます。
上部メニューについて左から解説します。

- 更新
- 検索・置換ボックスをクリア
- 新しい検索を開く(2020年リリースの機能!!)
- 折りたたみと展開の切り替え
結果をエディター画面に表示できます。マッチした個所やファイルの数だけでなく、その前後行をハイライト付きで一覧表示可能です。
細かい絞り込み
ちょっとわかりにくいんですが…ボタンをクリックするとさらにinput窓が出現します。

さらにどんなファイルを対象にするかなど設定でき、細かく絞り込めます。
含めるファイル
探したい探したいファイル名を入力します。
*(ワイルドカード)を使うと、特定の拡張子のファイルが探せて便利です。
例え ば、*.css
、*.scss
、*.html
という3つのファイルを探したいとき、,(カンマ)で区切ります。
除外するファイル
除外するファイルに省きたいファイルを設定すると
歯車マークを押すと除外したいファイル名を入力した状態で除外するか否かを切り替えられるので便利です。
こちらも使い方は含めるファイルと一緒で複数あるときは,(カンマ)で区切ります。
すべてまとめるとこんな感じになります!

よく使う正規表現
正規表現で使用する特殊文字は以下の通りです。正規表現では「メタ文字」「メタキャラクター」と呼びます。
使い方をこちらにまとめました。
メタ文字 | 説明 | 記述例 | 結果 |
---|---|---|---|
^ | 行頭 | ^abc | abcから始まる文字列 |
$ | 行の終わり | xyz$ | xyzで終わる文字列 |
` | ` | または | `jpg |
* | 直前の1文字の0回以上繰り返す | 0* | なし 0 00 000など |
+ | 直前の1文字の1回以上繰り返す | 123+ | 123 1233 12333など |
? | 直前の文字あるかないか | jpe?g | jpegかjpg |
[] | 指定された文字集合以外の1文字 | [^0-9] [^a-z] | 1 ~ 0の数字 アルファベット |
() | 一つのまとまり、グループ | (123)+ | 123 123123 123123123 |
\ | メタ文字のエスケープ \ を使いたいときは \\ と記述する。 | \* | 普通に* |
正規表現では空白、改行もよく使うのでまとめておきます。
記号 | 解説 |
---|---|
\n | 改行 |
\t | ハードタブ |
\s | 半角スペース |
文字の指定 | 解説 |
---|---|
[a-zA-Z0-9] | 英数半角小文字 |
\d | すべての半角数値 |
\D | 半角数字以外すべて |
\w | すべての半角英数字とアンダースコア |
\W | 半角英数字とアンダースコア以外すべて |
\n | 改行コード |
\s | スペース(半角スペース、\t、\n、\r、\f)すべて |
\S | スペース(半角スペース、\t、\n、\r、\f)以外のすべて |
\t | タブ |
置換といえば()が便利
正規表現を()で括って検索すると、(n)でn番目のグループにマッチした文字列を$1,$2..といったように参照表示可能です。
<p id="aaa">ここに文字列</p>
// 置換する文字列
<p id="(.*)">(.*)</p>
// 置換後の文字列
<p class="$1">$2</p>
コピペで使える正規表現チートシート
私がよく使うものをあげてみました。
- 改行を取り除く
- 2個以上のスペースを取り除く
- URLなどの一括置換
- 日本語の間の空白を取り除く
- 大文字・小文字の変換
- 連番付きの文字列から数字を取り除く
- エクセルやスプシで表作成(テーブル)を依頼された時
- PHPのif文をヨーダ記法に一括置換
- HTMLタグをガスッと削除
- ファイルの拡張子などの変更
- 数字を0パディングする
- 3桁ごとに,(カンマ)付与
- imgタグから画像パスだけ抜き取る