Wood-Roots:blogHOMEツール/エディタ201605/25Dreamweaverの「特定のタグ」検索を使って自由自在な検索・置換を行うツール/エディタ最近ではユーザーもすっかり減ってしまったDreamweaverですが、「特定のタグ」検索はSublimeText/Atomなどテキストエディタではできない複雑な検索・置換が可能となります。使い方もとても簡単です。プレーンなHTMLを扱う際(も減ってきたとは思いますが...)に使いこなせば相当作業効率がアップします。ADs基本的な使い方メニューの「検索および置換」を開くとウインドウが開きます。ここで「検索」を「特定のタグ」にします。対象としたいタグを指定します。「+」で追加できる条件は1つ前の条件にかかります。いう属性を持ちdivというタグの内部でそのdivはid=”wrap”という属性を持つという条件になります。繰り返しになりますが、検索条件は1つ前にかかるという点(この例ではdivの属性を指定している部分)がポイントです。class="hoge">コメントが入ります。</p></div>上記のp.hogeにヒットします。「正規表現を使用」にチェックを入れることで、属性名やタグ内のテキストの検索に正規表現を用いることができます。正規表現を使用することでより複雑な検索・置換が可能となります。実際にどういうことができるのかの実例をご紹介します。div#contents内のdiv.moduleを検索する以下のようなHTMLがあった場合、単にdiv.moduleを検索するだけではdiv#contentsとdiv#sideいずれの内部もヒットしてしまいます。これをdiv#contentsのみに限定します。/></li></ul></div></div>以下のように指定します。「タグ内部」で親要素を限定して検索します。「タグ内部以外」を選べば、div#contents内以外のdiv.moduleを検索できます。widthとheightが指定値以下のimgを検索する属性を検索する際に完全一致ではなく「>」「<」「!=」を指定することができます。widthやheightのような数値を取る属性の大きさを比較して検索することができます。/></div>以下のように指定します。複数のクラスを持つdivを検索する属性名のマッチに正規表現を使用することで、複数のクラスが指定されていても検索することができます。fugafuga"><p>コメントコメントコメントコメントコメントコメント</p></div>以下のように指定します。div.title内のh3に含まれる文字列「しまむら」を「ユニクロ」にする単なる検索よりも置換で用いることのほうがより実践的でしょう。大量のHTMLを一気に修正することができます。以下のようなHTMLのdiv.title>h3内の「しまむら」を「ユニクロ」に置換する例を見てみます。class="module"><p>彼は言った。class="module"><p>彼は言った。/>「これ、しまむらで買ったんだ」</p></div>以下のように指定します。検索条件で「含んでいる」はタグ内のテキストを検索します。正規表現を使用することで、jQueryのようなタグ検索と自由なテキスト検索を組み合わせることができます。後方参照($1,$2,...)によってマッチした文字列を参照することができるのもポイントです。body.subpage内のdiv#hogehogeのIDをdiv#sub_hogehogeに変更する属性名のマッチに正規表現を使い、さらに後方参照で属性名を取得することで属性名を一部書き換えるような処理も簡単です。id="hoge"><p>コメントが入ります。id="fuga"><p>コメントが入ります。</p></div></body>こうしたい。id="sub_hoge"><p>コメントが入ります。id="sub_fuga"><p>コメントが入ります。</p></div></body>ID名を正規表現でマッチさせ、マッチした文字列を後方参照で取得します。使いこなせばかなり自由な検索・置換ができるようになりますが、たとえば連番でクラスを指定したりnth-childのような検索をすることはできません。高度な検索・置換を行いたい場合はコマンドや拡張機能を使いましょう。コマンドや拡張機能については過去記事もご参照ください(と言ってもあまり詳しく書いてない...)Dreamweaverのコマンドを拡張機能化するDreamweaverでもコンソールっぽいものを使う(というか作る)まとめDwはやればできる子です。コメントをキャンセルメールアドレスが公開されることはありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。