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

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

VS Code

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

前提条件・VS Codeを使う

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

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

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

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

コーディング初心者必見。2015年にリリースされたVisual Studio Codeをコーディング初心者でも快適に使う方法をまとめます。随・・・

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

コーディング初心者必見。2015年にリリースされたVisual Studio Codeをコーディング初心者でも快適に使う方法をまとめます。随・・・

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

単一ファイル内での置換

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

vscodereg00.png

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

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

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

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

vscodereg01.png

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

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

細かい絞り込み

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

vscodereg02.png

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

 

含めるファイル

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

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

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

除外するファイル

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

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

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

 

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

vscodereg03.png

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

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

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

メタ文字 説明 記述例 結果

^

行頭

^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
// 置換後の文字列
なし

chikan02.png

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

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

// 置換する文字列
(\s)(\s)+
// 置換後の文字列
なし

URLなどの一括置換

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

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

置換する文字列

* (.*?)なんかが入るけど特に指定なし
* (\値)バックスラッシュ以降に入る値は(.*?)のなかに最初に該当する値が出てきたときに対応。
ポイントなのはaタグの次に改行なしでimgタグなどが入ることが多いので一番最初の閉じタグ「">」を見つけて置換する文字列をa開始タグのみに限定しておくことです。

置換後の文字列

(.*?)に入った文字列は $1 を使って取り出せます。$2 になると二個目の(.*?)のこと。

練習用コード

<a href="https://example.com/company"><img src="company.jpg"></a>
<a href="https://example.com/gallery"><img src="gallery.jpg"></a>
<a href="https://example.com/contact"><img src="contact.jpg"></a>

置換結果

こんな感じでimgタグに影響及ぼさずに置換できます!

<a href="<?php echo home_url('/company')?>"><img src="company.jpg"></a>
<a href="<?php echo home_url('/gallery')?>"><img src="gallery.jpg"></a>
<a href="<?php echo home_url('/contact')?>"><img src="contact.jpg"></a>

連番付きの文字列から数字を取り除く

連番付きの文字列から文章を整形しないといけないことがあります。
そういうときはこんな感じで取り除けます。
改行もう一個多い場合は\n\nを置換して取り除けば良いです。

//置換する文字列
^[0-9]+$\n
//置換後の文字列
なし

置換後の文字列

^で最初は[0-9](数字)で始まって+で[0-9]の繰り返し(何桁でもオッケー)で$で[0-9](数字)で終わったら同行の改行を削除しています。

練習用コード

1
テスト1
2
テスト2
5
テスト5
12
テスト12

置換結果

テスト1
テスト2
テスト5
テスト12

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

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

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

 

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

Read More Blogs

よく読まれている記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me