Dreamweaverの正規表現置換サンプルと解説

Dreamweaverの検索と置換って何気に凄い。
色々出来る中でもかなり便利だと思う正規表現を使った置換のサンプルを挙げてみる。
スパゲッティなソースの修正も、これと特定のタグ検索知ってれば作業スピードが格段に上がるかも。
「特定のタグ」で出来るじゃんというのも中にはありますが、正規表現を使うことに意味があるので突っ込みは受け付けませんw
微妙に間違ってたところ修正入れつつ加筆。

Dreamweaverで正規表現を使うには?

Ctrl+F(コマンド+F)押して表示されるダイアログの右下にある正規表現を使用にチェックを入れるだけです。

検索および置換ダイアログ

テキストを維持したままタグを減らしつつ変更

HTML→XHTMLで一番多い作業がこれだと思う

置換対象:

<td width="397"><font size="2">テキスト</font></td>

置換後:

<th scope="row">テキスト</th>

検索パターン:<td width="397"><font size="2">(.+)</font></td>
置換パターン:<th scope="row">$1</th>

fontタグに挟まれてる文字列を記憶して、置換で記憶した文字列を変更したタグに出力しています。
記憶と置き換えについては最後の方で説明いれてるのでここでは省略。
ドットとプラスの意味はそれぞれ、

  • ドット→新行 (改行) 以外のすべての単一文字
  • プラス→直前の文字の 1 回以上の繰り返し

なので、『改行以外の文字を何文字あっても記憶』という意味になります。
この場合プラスはアスタリスク*でも構いません。アスタリスクは「直前の文字の 0 回以上の繰り返し」という意味です。

でも実際やってみると「改行以外」なのに、同じ条件のものが複数横並びしてると改行飛び越えてヒットしてしまうことがあります。perlやphpほど厳密ではないのかも。
そんなときは(.*?)→のように、アスタリスクやプラスの後に?をひとつ添えると1つだけマッチするようになります。
?は0 または 1 回マッチ/なるべく少ない回数だけマッチという意味。

検索対象がアルファベットや数字などであれば、ドットではなく\w*や\d+と指定した方がスマートです。

  • ¥w→下線を含む、英数字1つ。[A-Za-z0-9_] と同じ
  • ¥d→数字1文字。[0-9] と同じ
  • ¥W→非英数字の1つ。[^A-Za-z0-9_] と同じ
  • ¥s→スペース、タブ、用紙送り、改行を含むホワイトスペース1つ

エスケープシーケンスを複数同時に使う場合は大カッコ[]で挟みます。
大カッコで挟むと「特定範囲の文字をあいまいに指定」することが出来るので、
[¥w¥s]+と書いた場合は、英数字かスペースのどれか、というアバウトさになり
さらにその後+をつけることで、範囲指定したどれかの文字が1回以上繰り返されますよ、という指定になります。

属性の中の数値だけまとめて変更

tdのwidthがページごとに違ってるとかいうトンデモなソースが実際ありました…。
数値の違う属性を一括で同じ数値に置換したい場合などに。

置換対象:

<td width="397">テキスト</td><td width="201">テキスト</td>

置換後:

<td width="300">テキスト</td><td width="300">テキスト</td>

検索パターン:td width="\d+"
置換パターン:td width="300"

¥dは数字1文字を表します。[0-9] と同じです。
プラスで『数字のどれか1文字が1回以上繰り返されてる』という指定になります。

widthをheightにするなら…
検索パターン:td width="(\d+)"
置換パターン:td height="$1"

小カッコで挟んだら記憶。覚えないと損。

属性に単語を追加

クラス名を付け加えるとか。

置換対象:

<span class="hoge">テキスト</span>

置換後:

<span class="hoge test">テキスト</span>

検索パターン:class="(\w+)"
置換パターン:class="$1 test"

¥wは下線を含む、英数字 1 つ。[A-Za-z0-9_] と同じ意味。
つまり『英数字1つが1回以上繰り返されてます』ということ。

imgタグをXHTMLの書式にする

ドキュメントタイプ変更で出来るけど一応参考に。

置換対象:

<img src="test.gif" alt="test">

置換後:

<img src="test.gif" alt="test" />

検索パターン:<img(.*)">
置換パターン:<img$1" />

>の前にあるダブルクォートが重要。
ドットと組み合わせる場合はアスタリスクとプラスどちらでも良い。

hrefのハイフンをアンダーバーにする

パス名変えたいときなんかに。

置換対象:

<img src="images/test-img.gif" alt="test">

置換後:

<img src="images/test_img.gif" alt="test" />

検索パターン:(\w*)/(\w*)-(\w*).
置換パターン:$1/$2_$3.

(.+)→任意の一文字+1 回以上の繰り返し+中の正規表現パターンを記憶する
アスタリスクは0回以上の繰り返し。
$n→記憶したパターンを出力

$nは、括弧を前から数えて、記憶された括弧の中身を順番に入れるので
(.+)~(.+)~(.+) こんな感じで複数検索した場合は
$1~$2~$3 で置換出来る。

PHPとかJavaScriptとかが分かるのなら、配列みたいなものだと思えば分かりやすいかもしれない。
(.+)~(.+)~(.+) → array('文字列', '文字列', '文字列')
$1~$2~$3 → array[0]~array[1]~array[2]

Dreamweaberのヘルプにもあるが、()と$は記憶された中身を置換するので
置換で$3~$2~$1と指定すると順番変更も出来たりする。

value属性を自動挿入

チェックボックスとかラジオボタンでやると楽。

置換対象:

<option>hoge</option>

置換後:

<option value="hoge">hoge</option>

検索パターン:<option>(.*)</option>
置換パターン:<option value="$1">$1</option>

電話番号のマッチング

PCREのパターンそのまま使えます。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="row">1234-56-7890</th>
    <td>090-1234-5687</td>
  </tr>
</table>

パターン例:\d{2,4}-\d{2,4}-\d{3,4}

※下記2例追加

TBODYの削除

改行を含む空白部分のマッチ例です。

置換対象:

			</table>
			<TABLE width="691" cellspacing="0" cellpadding="0">
				<TBODY>
					<TR>
<!--省略-->
									</TR>
								</TBODY>
							</TABLE></TD>
						<TD rowspan="5"><IMG src="image.gif" alt="" width="15" height="254"></TD>

置換後:

			</table>
			<TABLE width="691" cellspacing="0" cellpadding="0">
					<TR>
<!--省略-->
									</TR>
							</TABLE></TD>
						<TD rowspan="5"><IMG src="image.gif" alt="" width="15" height="254"></TD>

検索パターン:[\s\t]+(<TBODY>|</TBODY>)
置換パターン:なし
「大文字と小文字を区別」にチェックをしない。

Dreamweaverの場合、改行を含む空白部分はスペースとタブの連続指定だけでもヒットします。

必要な属性だけ残して他を全て消す

idとclassだけ残したい…というケースのサンプル。

置換対象:

<TABLE cellspacing="0" cellpadding="0" width="691" id="main">
<TABLE width="425" cellspacing="0" cellpadding="0">
 <TABLE width="100%" border="0" cellspacing="0">
<TABLE width="725" cellspacing="0" cellpadding="0" class="hoge">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">

置換後:

<table id="main">
<table>
<table>
<table class="hoge">
<table>

検索パターン:<table(?:(?: (?:cellpadding|cellspacing|width|border)="[\w\-_%]+")+( (?:id|class)="[\w\-_%]+")*)>
置換パターン:<table$1>
「大文字と小文字を区別」にチェックをしない。

丸カッコの事を正規表現らしく言うとサブパターンと言うんですが、
このサブパターンの先頭カッコの直後にエクスクラメーションとコロン(?:)をつけるとマッチした文字が記憶されなくなることを応用したものです。
最終的にidかclassの属性を示す丸カッコの部分が$1に残ります。
残す属性と消す属性は縦線で区切ればいくつでも指定できます。

補足

上記例だとIDとClassが両方ある場合

マッチする:

<TABLE width="725" cellspacing="0" cellpadding="0" class="hoge"  id="main">

マッチしない:

<TABLE  id="main" width="725" cellspacing="0" cellpadding="0" class="hoge">

という結果になる。
マッチする例は残す属性が2つ横に並んでいるからアスタリスクの条件に当てはまっているだけなのだけど、
丸カッコは1つずつのパターンしか記憶しないので$1の対象は最後にマッチしたidになる。
1つしか記憶されないのは[^>]*で大雑把にして

<table(?:(?: (?:cellpadding|cellspacing|width|border)="[\w\-_%]+")+([^>]*))>

と変更すれば回避できるんだけど、飛び飛びになってたらこれもマッチしないので
残す属性が散らばっているなら削除条件だけにした方が効率が良い。

(?: (?:align|height|width|bgcolor|cellpadding|cellspacing|width|border|background|style)="(?:[\w\d\-_%#:;\(\)\.\,\s]+|)")

削除だけなら?:の有無はどちらでもいい。

ネタが出来たらまた追加します。

見つかりませんとか言われる場合

検索エリアのメタ文字をエスケープしてないと検索内容が変わってしまいます。
メタ文字とは、正規表現で使われている特殊記号のことです。
カッコ()や[]大カッコ、中カッコ{}、バックスラッシュ\、半角のハイフン等を検索にヒットさせる場合は、
そのメタ文字の前に全てバックスラッシュ\を付ける必要があります。

参考:adobeのlivedoc | PCRE 正規表現構文

「Dreamweaverの正規表現置換サンプルと解説」への15件のフィードバック

  1. 大変素晴らしく、ためになる記事をありがとうございます。正規表現初学者の自分にとっては
    ものすごく有意義かつわかりやすい記事でした。
    おかげでクライアントのサイトのソース修正が格段に速くなりました(・∀・)
    今後も活用させて頂きます。

    返信
  2. ピンバック: メインブログ
  3. ピンバック: メインブログ

Jun'ya Hirano へ返信するコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください