どうもこんにちは、ハラです。
グラコロが発売されましたね。
この時期のマックは期間限定メニューが多くて、すこしハッピーです。
そんなグラコロ食べながら投稿です。
前回は、Dreamweaverで正規表現を使用して置換する方法でした。
はい、復習はおっけーですか？
今回はほんの少しだけ掘り下げてみようと思います。
前回お伝えしました(.*)は
改行以外のすべての単一文字を0回以上繰り返す
という意味ですが、
意図しないところまでさくっと選択されてしまう時があります。
たとえば、
<select> <option value="ほぼ食べる">グラコロ</option>
<option value="よく食べる">チキンナゲット</option>
<option value="だいぶ食べる">ポテト</option>
</select><
上記で、valueの値だけ置換したいとします。
ctrl+Fで
検索： <option value="(.*)>
だと
<option>の中がすべて選択されてしまいます。
その時は、
(.*?)
を使いましょう。
これは
改行以外のすべての単一文字をなるべく少ない回数だけマッチさせるという意味。
これでだいぶ、検索の判定力が向上します。
ですが、もっとスマートに絞り込める正規表現もあります。
絞り込んだ検索・置換
(.*)はなにもかも全て判定されますが、
[\w]*や[\d]*というふうに書くと、
数字だけ、英数字だけといった条件指定が可能になります。
¥w→下線を含む、英数字 1 つ。[A-Za-z0-9_] と同じ
¥d→数字1文字。数字 1 文字。[0-9] と同じ
¥s→スペース、タブ、用紙送り、改行を含むホワイトスペース1つ
参考：adobe正規表現
奥が深いですね。
こうすることで、検索でも絞り込んでいくことが可能です。
たとえば、
<table>
<tr>
<th>電話番号</th>
<td>03-5464-1177</td>
</tr>
<tr>
<th>携帯電話</th>
<td>090-1234-5678</td>
</tr>
</table>
tdの中を検索したい時。
<td>(.*?)>
や
<td>(.*)</td>
や
<td>[\w]+-[\w]+-[\w]+</td>
で引っかかります。
ですが、そのままだと電話番号も携帯番号も検索されてしまいます。
携帯番号だけ検索・置換をする時は
検索：\d{3}-\d{4}-\d{4}
とすれば、
「3桁-4桁-4桁」の「数字のみ」検索として絞り込むことができます。
{}の中に桁数が入っているのですね。
もちろん、$nも使えます。 たとえば、
<img src="/img/image-A.jpg" alt="サンプルイメージA" />上記のimage-A.jpg(ダッシュ)からimage_A.jpg(アンダーバー)に代える場合。
<img src="/img/image-B.jpg" alt="サンプルイメージB" />
<img src="/img/image-C.jpg" alt="サンプルイメージC" />
検索：/([\w]*)-([\w]*).
置換：/$1_$2.
です。
このように正規表現は、Web制作の中でいろんな場面に出てきて奥が深いものです。
今回紹介した正規表現は、まだまだ入り口付近のものばかり。
これを機会にWebデザイナーの皆さんも正規表現について理解を深めてみてはいかがでしょう。
水口翼
かのう
ぬいぐるみ
いそっち
ボブ
濱田優貴
しんぶー
ぴんしゃん
ハシモト
けっつん
acurry
ハラ
ぐーちゃん
はーにゃ
とくなが
ぽこ太
京茶華
やす
啄木鳥
イトウ