HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

【正規表現とは 超入門】何が出来て何が良いのか、ゆるい説明と使用例を交えてまとめてみた

f:id:maru0014:20180202001432p:plain

最近会社の同僚に正規表現について教える機会が何度かあったがいまいち上手に説明できず、悔しい思いをしたので思考を整理してもっと上手に伝えてあげられるようになるためにも記事にしてみる。 どんなことが出来るのか実用例も記載しつつ説明するので参考までに御覧ください。


この記事でできるようになること

  • 正規表現で何ができるかなんとなくわかる
  • 正規表現パターンを全て憶える必要は無いということを憶える
  • 面倒くさそうな置換には正規表現がつかえるかも ということだけ憶えておく


正規表現とは

Wikipediaさんにはこうある

正規表現(せいきひょうげん、英: regular expression)とは、文字列の集合を一つの文字列で表現する方法の一つである。 正則表現(せいそくひょうげん)とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。

正規表現 - Wikipedia

こんなん読んでも何のこっちゃですよね。

「正規表現とは」でGoogle検索すると

正規表現とは? - Qiita

初心者歓迎!手と目で覚える正規表現入門・その1「さまざまな形式の電話番号を検索しよう」 - Qiita

こんなのが出てきます。 しかし、ある程度の知識を要する説明と言うか"文字列"と言われてピンとこなくて???ってなる人には少々敷居が高く、 もっと簡易的な、超入門的な紹介の仕方があっても良いんじゃないかと思うので、独自の解釈でなるべく噛み砕いて説明してみます。


文章内で何かの文字を検索したいときに曖昧な条件で検索できるようにする

実際には"検索"という作業以外にも"置換"や"比較"などでも用いますが、多くの人にとって最も身近な”検索”という作業を例に挙げます。 ただし、以下のような正規表現に対応したエディタが必要です。

EmEditor (テキストエディタ) – Windows用テキストエディター

Sakura Editor - A Japanese text editor

Sublime Text - A sophisticated text editor for code, markup and prose

URL•ÏX‚Ì‚¨’m‚点

※Windowsの「メモ帳」は残念ながら正規表現での検索に対応しておりません。

なんとかかんとか48を検索

例えば以下のようなリストから「なんとかかんとか48」とつくアイドルグループのみを検索したいとします。実際はこんな検索しないか。

Category:日本のアイドルグループ - Wikipediaからランダムに抜粋しました。他意は無いので大きいお友達怒らないでね。

AIDL5
AKB48
On and Go!
ORANCHE
SDN48
STU48
W-inds.
アイドル夢工場
アリス十番
春日井アイドル

検索で引っかかって欲しい条件はアルファベット3文字の後ろに48とつくですよね。

このアルファベット3文字の後ろに48とつくという曖昧な検索条件を実現できるのが正規表現です。

この条件で検索するには[A-Z][A-Z][A-Z]48となります。

実際にちゃんと動作するか確かめてみましょう。

Regex Test Drive | 正規表現オンラインテストサイト

こちらのサイトで確認したところAKB48、SDN48、STU48がこの検索条件にマッチしたようです。

f:id:maru0014:20180201233247p:plain

ここまでで正規表現でどんなことができるかはお分かりいただけたでしょうか。

次はなぜ[A-Z][A-Z][A-Z]48でできたのか。想像つく方も多いでしょうが一応解説します。


[A-Z]は大文字のA~Zの中からどれか1文字

[]の中身が条件となっており、[]で1文字分を表しています。

つまり[A-Z][A-Z][A-Z]とすると大文字のアルファベッドが3文字という条件になります。

その後ろに48と付けて[A-Z][A-Z][A-Z]48とすることで「なんとかかんとか48」が検索できたということ。

ここまではただ検索するだけでしたが、次は実用的な”置換”をしてみます。


HTMLの編集でURLの一括置換を使う時

筆者は仕事でEC(ネットショップ)の運営に携わっており商品ページのデータに触れることが多いのですが、このようなHTMLがたくさんあります。 一昔前は画像のwidth(横幅)とheight(高さ)の両方を指定するのが一般的でしたが、昨今はレスポンシブ化の影響もあってあまりサイズ指定をしなくなりました。

(PCとスマホ同一ページで表示していた場合にスマホのレイアウトが崩れるのを防ぐ目的)

height属性を一括で削除する

<a href="[item_url]"><img src="[img_url]" width="600" height="120"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600" height="180"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600" height="200"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600" height="100"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600" height="100"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600" height="280"></a><br>

そうなるとこのHTMLデータからサイズ指定を消さなくてはなりません。 例においては6箇所の編集で済みますが、もし20個imgタグがあったら手で削除するのはめんどうですよね。

今回やりたい検索条件は height="数字が3文字"ですね。 感のいい方はどんな正規表現か想像できたでしょう。

このようになります。

height="[0-9][0-9][0-9]"

そして置換後の文字列を空白にして「すべて置換」すれば・・・

<a href="[item_url]"><img src="[img_url]" width="600"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600"></a><br>
<a href="[item_url]"><img src="[img_url]" width="600"></a><br>

一瞬にして全ての高さ指定を削除できました!


正規表現は全て憶えなくて良い

正規表現のパターンは結構な数あります。筆者も全ては憶えていません。

しかし、そもそも全てを憶える必要もないのでまずは

面倒くさそうな置換や文字列の比較には正規表現がつかえるかも

ということだけ憶えておきましょう。 あとは必要な場面に出くわしたときに調べればいいのです。

便利なチートシート

チートシートとは、カンニングペーパーみたいなものです。 以下は日本語で説明が記載されているので理解しやすいと思います。

テキストエディタで使える正規表現チートシート | 吉川ウェブ

http://kanemotilevel.com/gazou/seiki.pdf