Front End Programming
  1. ホーム
  2. ブログ一覧
  3. VScodeでカンタン!正規表現置換のためのチートシート

VScodeでカンタン!正規表現置換のためのチートシート

VS Code正規表現

コードをいわゆる「置換(置き換え)」、一気に変換したい!ってときありませんか?

「正規表現」を使うと一部の文字を削除したり、抽出したりできて超便利です。

この記事は高機能エディタVScodeの置換機能で正規表現をある程度使えるようになりたい人、コピペで手軽に置換をしたい人のために書かれた記事です。

VScodeの使い方、正規表現、置換の基本、よく使う置換のチートシートについて掲載しています。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままなフリーランスエンジニア。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

前提条件・VS Codeを使う

使用ツールはVisual Studio Code(以下VSコードと省略)。

ざっくり言うと、制作部をフォルダー単位で管理できたり、コーディングしやすい機能が最初から備わっている、Microsoft発の高機能エディターです。

この記事では深く触れませんので、VS Codeに関する記事も合わせてお読みください。

初心者コーダに贈る!超軽量高機能エディタVS Code入門 初心者コーダに贈る!超軽量高機能エディタVS Code入門2

今回は、単一ファイルの置換方法と複数ファイルの置換方法両方のやり方をご紹介します。

単一ファイル内での置換

ショートカットキー cmd + opt + F (Win cntrl + H)で置換機能。検索だけしたいときは、ショートカットキーcmd(Win cntrl) + F

単一ファイル内での置換

  • 大文字と小文字を区別する
  • 単語単位で検索する
  • 正規表現を使用する
  • 件数
  • 頭文字を大文字にする
  • 1個だけ置換
  • すべてを置換

複数のファイル内での置換

余談ですが検索だけしたいときは、ショートカットキーcmd(Win cntrl) + shift + Hを押すとエディターの右上に検索ボックスが出てきます。ちなみに、ショートカットキーcmd(Win cntrl) + shift + Fでファイル全体の検索ができます。

上部メニューについて左から解説します。

複数のファイル内での置換

  1. 更新
  2. 検索・置換ボックスをクリア
  3. 新しい検索を開く(2020年リリースの機能!!)
  4. 折りたたみと展開の切り替え

結果をエディター画面に表示できます。マッチした個所やファイルの数だけでなく、その前後行をハイライト付きで一覧表示可能です。

細かい絞り込み

ちょっとわかりにくいんですが…ボタンをクリックするとさらにinput窓が出現します。

細かい絞り込み

さらにどんなファイルを対象にするかなど設定でき、細かく絞り込めます。

含めるファイル

探したい探したいファイル名を入力します。

*(ワイルドカード)を使うと、特定の拡張子のファイルが探せて便利です。

例えば、*.css*.scss*.htmlという3つのファイルを探したいとき、,(カンマ)で区切ります。

除外するファイル

除外するファイルに省きたいファイルを設定すると

歯車マークを押すと除外したいファイル名を入力した状態で除外するか否かを切り替えられるので便利です。

こちらも使い方は含めるファイルと一緒で複数あるときは,(カンマ)で区切ります。

すべてまとめるとこんな感じになります!

除外するファイル

よく使う正規表現基本の「キ」を表にまとめました

正規表現で使用する特殊文字は以下の通りです。正規表現では「メタ文字」「メタキャラクター」と呼びます。

使い方をこちらにまとめました。

メタ文字 説明 記述例 結果
^ 行頭 ^abc abcから始まる文字列
$ 行の終わり xyz$ xyzで終わる文字列
| または jpg|jpeg jpgかjpeg
* 直前の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 半角スペース

チートシートのお品書き

  • 改行を取り除く
  • 2個以上のスペースを取り除く
  • URLなどの一括置換
  • 連番付きの文字列から数字を取り除く

改行を取り除く

いたってシンプル。

// 置換する文字列
\n
// 置換後の文字列
なし

改行を取り除く

2個以上のスペースを取り除く

もしタブを削除したい場合は(\t)に替えればオッケー。

URLなどの一括置換

一度書いたHTMLのソースコードをWordPressなどのショートコードに置き換えないといけないことってありますよね?
そんなときはこいつだ!URLのコード(https://exmample.com/)は適宜変えてください。

// 置換する文字列
<a href="https://exmample.com/(.*?)(\">)
// 置換後の文字列
<a href="<?php echo home_url('/$1')?>">

日本語の間の空白を取り除く

PDFから文章をコピーすると謎の半角スペースが紛れ込んでることがよくあります。 間のスペースを取り除くだけならこんなコードでオッケーです。

//置換する文字列
[亜-熙ぁ-んァ-ヶ] [亜-熙ぁ-んァ-ヶ]
//置換後の文字列
なし

エクセルやスプシで表作成を依頼された時(2020/12/15追加)

テーブルで表を作ってほしいと依頼され時があります。表が長いとコーディングがすげーめんどくさいですよね。。。

そんな時は置換で一気に解決ダー!(猪木風)

挿入したいテーブルを丸っとコピーしてVSコードに貼り付けます。 挿入したいテーブルを丸っとコピーしてVSコードに貼り付け

セルとセルの間はタブとして認識されるのでそれを利用します。

//置換する文字列
^((.*?)\t)+(.*?)$
//置換後の文字列
<tr>\n  <td>$1</td><td>$2</td>\n</tr>

残ったタブを削除します。

//置換する文字列
\t
//置換後の文字列
なし

まとめ・置換最強

置換を制すればコーディング効率も抜群に上がります。

ぜひマスターして、ムダな作業を減らしましょう。

この記事が皆さんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Web制作に関する人気の記事

セブ島・海外移住に関する人気の記事

キャリアアップ・転職に関する人気の記事