Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

Dreamweaverでの正規表現

HTML2011年5月5日

Dreamweaverの正規表現による検索・置換は非常に便利です。ほんの少しの表記を覚えるだけで大規模サイトの作業が非常に楽になります。個人的によく使う正規表現をまとめてみました。
「わざわざ正規表現使わなくてもできるじゃん」というものもあるかもしれませんが、特定のタグとか使うのが何か個人的にアレなんです、すいません。

imgタグの書式をHTML4.01からXHTMLに変更

急な仕様変更でこんなことをした事がありました。

検索パターン

<img(.*)">

置換パターン

<img$1" />

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

半角カタカナを検索

たまにPCサイトでも半角カタカナが紛れ込んでることがあります。下記のパターンで洗い出すことが可能です。

検索パターン

[ア-ン゙゚]

テーブル要素を一気にマークアップ

テーブルの内容が多いときに重宝します。

検索パターン

(.*)\t(.*)\t(.*)\t(.*)

置換パターン

<tr>
<th>$1</th>
<td>$2</td>
<td>$3</td>
<td>$4</td>
</tr>

$nは、カッコを前から数えて、記憶された括弧の中身を順番に挿入していきます。
(.*)~(.*)~(.*)などで検索をかけた場合は、それぞれ$1~$2~$3で置換する事ができます。

これはプログラムの配列とよく似ています。
(.*)~(.*)~(.*)は、配列で表記するならarray('文字列', '文字列', '文字列')といった感じです。
$1~$2~$3array[0]~array[1]~array[2]って事ですね。

()と$は記憶された中身を置換するため、置換パターンで$3~$2~$1とすることでと順番変更なども可能です。

ドキュメント相対でも階層を気にせず一気に置換

検索パターン

<img src="(.*)" alt="独学Webデザイナーの覚書" width="294" height="37" />

置換パターン

<img src="$1" alt="置換したいテキスト" width="294" height="37" />

画像のファイル名に含まれる「_(アンダースコア)」を「-(ハイフン)」に変更

ファイル名を変えたい時も、下記のパターンで一気に置換する事ができます。

検索パターン

(\w*)/(\w*)-(\w*).

置換パターン

$1/$2_$3.

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

例えばテーブルで余計な要素(borderやcellpaddingなど)を一気に消すことができます。

検索パターン

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

置換パターン

<table$1>

ここに挙げさせていただいたものはコピペしてすぐ使えるものばかりなので、どうぞコーディングの際にお役立てください。

この記事を読んでいる方にオススメの記事

「HTML」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • 承認制のため、即時には反映されません。

ページの先頭に戻る