フロントエンドこそ覚えたい正規表現：background-size編
夏の暑さに負けてポケモンGOが滞っているyanagimachiです。
運動不足なので、毎日1匹孵化させるのを目標にがんばって歩こうと思います。
さてさて、正規表現といえばバックエンドの人たちがバリバリフォームとかで使っているイメージだと思います。
私も普段はバックエンドのfujiharaさんに書いてもらえばいいや・・・と思っています。
でもたまーに大量修正するの大変だからフロントエンドでも使いたいなという場面があると思います。
初回はbackground-size編です！
ショートハンドでbackground-sizeを書いちゃった
でも、対象ブラウザにAndroid4系デフォルトブラウザが入っていたなんてときは、別々に記述する必要がありますよね。
正規表現で書き換えちゃいましょう！
置換したいCSS
background: url(/img/bg.png) 50% top /100px 50px no-repeat;
正規表現
検索：(.*)\s\/(\d+px\s\d+px)\s(.*);
置換：$1 $3;\nbackground-size: $2;
置換されたCSS
background: url(/img/bg.png) 50% top no-repeat;
background-size: 100px 50px;
- Sassの場合は正規表現の最後の「;」を削除してください。
- タブやスペースなどは考慮していませんので、適宜調整してください。
-webkit-background-size書いたけど、いらなかった！
文頭のタブを含めてどうやって行ごと削除するのでしょうか？
置換したいCSS
（文頭がタブ）-webkit-background-size: 100px 50px;
正規表現
検索：^\t+-webkit-background-size:\s\d+px\s\d+px;\n
置換：なし
※インデントがスペースのときは
^\s+-webkit-background-size:\s\d+px\s\d+px;\n
になります。
今回の正規表現はWebStormで検索時に「Regular expression」にチェックを入れて確認しました。
またフロントエンドで必要な正規表現を思いついたら続きの記事を書きたいと思います。
今後もfujiharaさんやkourakuさんに教えてもらって正規表現レベルアップ目指すぞー！
