CREATOR BLOG

知らないと一生後悔するDreamweaverで正規表現

2013/03/27
tan
  • このエントリーをはてなブックマークに追加

そろそろいくらが食べたくなって来ました、tanです。
なんとか効率化できないかシリーズですが、今回は正規表現です。

コーディングを進めていくうちに、まとめて変換したい部分が出てきたりします。
例えば、ナビゲーション部分に変更があり、拡張子がjpgからpngになった!

こんな単純な決まった文字列+連番の組み合わせなのに、普通にやると一括置換できません。
複数のページに跨ったり、変換したい要素が離れていたりするとなかなか手間です…!!

こんな時は正規表現なら一発です!
様々なプログラム言語で使われている正規表現ですが、難しそうでなかなかとっつきにくいです。
でも少し知っておくだけでもなかなか便利です!

今回は決まった文字列+連番です。
連番ということは、数字です。
数字は「\d」です。
(無理して覚える必要はなく、調べれば一覧が出てきます)

Nav\d.jpgで検索をかけると、Nav1.jpg、Nav2.jpg、Nav3.jpg、Nav4.jpgが該当します。
でもそのまますべて置き換えると、みな同じものに置き換えられてしまいます。
そこで、正規表現の部分を保持してくれる$1を使います。
()で括った部分は$1で保持されます。

今回の場合は、
検索Nav(\d).jpg
置き換えNav$1.png

※注意点
正規表現を使う場合、オプションの「正規表現を使用」にチェックを入れる必要があります。

こんなかんじです。これで「すべて置き換え」すると、「Nav+連番.jpg」がすべて「Nav+連番.png」に置き換わります!
ケアレスミスも減らせ、負担も減らせていいことばかりですね!
正規表現はまだまだいろんなことができるので、覚えるとおとくかも!

また、「すべて検索」の左にある2つのアイコンで検索条件の保存、呼び出しができます。
はじめ正規表現書くのに時間がかかっても、次からはボタンひとつかもしれません。

最後に注意ですが、正規表現は思わぬ部分で動作する可能性もありますので、気をつけて扱ってください。

【参考サイト】
Dreamweaverの正規表現置換サンプルと解説

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive