デザイナーでも覚えておいてよかった正規表現

クリエイティブ

デザイナーの人でもぜひ覚えておきたいのが「正規表現」。
さくらエディタやAtomでも使うことができる。

リンク文字<a href=”#”>~</a>の置換

すでにURLが入っているものを空の状態にしたいとき

メルマガ制作など、HTMLの構成はほぼ同じで、毎回URLだけ変わるときなどによく使う。URL部分を手作業で選択してなんかしてたら時間がもったいない。

<a href="aaaaaaa.html">リンク</a>

<a href="#">リンク</a>

置換前(文字列検索)

<a href=".*">~</a>

置換後(この文字列に置き換え)

<a href="#">~</a>

<h3>→<h4>などのHTMLタグの置換

<h3>タグを<h4>に変更したい

hタグの階層間違えてしまい、一括で修正したいときなどに便利。

置換前

(</?)[hH]3

置換後

\1h4

<p>タグを<h4>に置換したい

同様の方法でpダグをhタグに置換することもできる。

置換前

(</?)[p]

置換後

\1h4

特定の文字列を置き換えない場合の「¥1」

タグで囲まれた前後だけを置換したい

<h3 class="hoge">xxxxxx</h3>
<h3 class="hoge">yyyyyy</h3>
<h3 class="hoge">zzzzzzz</h3>

とあり、タグ内に中に異なる文字列があるため検索はできるけど置換がうまくできない。そんなときは

置換前

<h3 class="hoge">(.*)</h3>
置換後
<p class="hoge">(\1)</p>

置換結果は

<p class="hoge">xxxxxx</p>
<p class="hoge">yyyyyy</p>
<p class="hoge">zzzzzzz</p>

この検索した文字列を置き換えない「\1」ってのがとても便利。\2、\3と増やして使うこともできるので詳しく知りたい方は調べてみて下さい。

参考サイト
正規表現サンプル集
https://www.megasoft.co.jp/mifes/seiki/r105.html

コメント

タイトルとURLをコピーしました