はじめに 🌱

皆さん初めまして、正規表現使っていますか？
私は何回か使ったことはあるのですが、普段は全く使えていません...。

コードやテキストの差し替えの際に少しだけならと手動でやって、
変な半角スペースが入ってしまったり、Classタグ名を消しすぎてダブルクォーテーションを消してしまったりってことありますよね。私はあります...💦
（上記凡ミスで表示がおかしくなり原因判明に数時間悩まされたことも昔はありました🫠🫠🫠）

そんなある時、修正したcssファイルの影響範囲が広く、表示崩れが起こっていないかの調査を行うことになり、そのClassが記載されている数百ファイルをリストアップするとなった際に、これは「正規表現」を覚える良い機会だと悟りこの記事を書きました。（長い前置き終わりです）

使用環境 💻

・sublime text3
・visual studio code
など

使用・参考サイト ✍

◆正規表現とは何なのかをわかりやすく教えてくれるサイト。

◆正規表現が上手く動いているか確認できるサイト。

◆参考サイト様たち

正規表現早見表 👀

正規表現	説明	正規表現の例	検索できる文字列の例
.	なんでもいい１文字	私は.です	私は貝です、私はZです、私は0です
^	行の先頭	^デザイナー	デザイナーブック、デザイナーになるには
$	行の最後	デザイナー$	WEBデザイナー、あなたはデザイナー
\s	空白	あい\sえお	あいえお
\d	数字	h\d	h1、h2、h3
\n	改行	私は\n犬だ	私は犬だ
\b	単語の区切り	\b1\b\b0\b	1と0
*	直前の文字が０個or1個以上連続する場合	はー*い	はい、はーい、はーーい
+	直前の文字が1個以上連続する場合	はー+い	はーい、はーーい、はーーーい
?	直前の文字が０個or1個の場合	Windows ?98	Windows98、Windows 98
\|	いずれかの文字列	田中\|佐藤\|伊藤	田中、佐藤、伊藤　のみ抽出
[ ]	指定した文字のどれか	それは[A-Z]です	それは（A〜Z）です　のみ抽出
（）	（）内をグループ化	それは（私\|僕）です	それは私です、それは僕です　を抽出

汎用的に使いやすいと感じた正規表現たち 😊

◆ 組み合わせしやすい正規表現

●●● ?,●●●s?

複数形や、半角スペースありなしで検索できたりと地味に便利。

[A-Z]　

A〜Zを検索！他の正規表現と組み合わせやすい！（小文字は含まれないので注意！）

[0-9]　

上記の数字版。0〜9を検索できます。

[あ-ん]　

あ〜んが検索できます。

濁点/半濁点がついたものも検索されるので注意（ＪＩＳ漢字コード表の並びに紐付いているらしいです）

[A-Z0-9]　

[ ]内で続けることで、A〜Zと0〜9を条件に検索できます。

[^A-Z0-9]　

A〜Zと0〜9を除いて検索できます。これも使いやすい。

（●▲）+

「●▲」の１回以上の繰り返しで検索ができる。

◆ 使用頻度高めな正規表現

検索

\n+

置換

\n

見やすくするために入れていた改行もコーディング終了時にこれで一括掃除！

検索

[亜-熙ぁ-んァ-ヶ] [亜-熙ぁ-んァ-ヶ]

置換

なし

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

●●●(.+)▲▲▲

●●●で始まり、▲▲▲で終わるものをすべて検索！

◆ 頻繁には使わないが、使い勝手の良い正規表現

検索

([0-9]+)/([0-9]+)/([0-9]+)

置換

$3/$1/$2

検索の正規表現は、/で区切られるまで連続する数字を検索できる。（日時を検索する時におすすめ）
置換の正規表現は、検索したものの順番を入れ替えられる。（月/日/年を年/月/日に入れ替えたりできます！）

$nは「置換前」に（）で囲った箇所を置換前のまま使用する(数字nは何番目の括弧かを指定している！)

検索

<div id=".*">

置換

<div id="置き換えしたい文字列">

一括で置き換えたい時に。

検索

<("[^"]*"|'[^']*'|[^'">])*>

置換

なし

HTMLタグを削除できます。

HTMLから文字だけ抽出したい場合に！

検索

\b[0-9]\b|\b[1-9][0-9]\b

置換

なし

0〜99を検索できる。

\bで挟むことで24を2と4に分けずにHITさせることができる。

さいごに 📝

まだ他にもたくさん使える部分はあると思いますが、今回の部分を組み合わせていけばより作業効率が上がると思います！！
これからも正規表現を活用できるように頑張っていきましょう💪