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

クリエイティブ

2021.10.10 2021.05.19

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

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

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

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

↓

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

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

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

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

(</?)[hH]3

\1h4

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

(</?)[p]

\1h4

<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と増やして使うこともできるので詳しく知りたい方は調べてみて下さい。