はじめに
タイトル通りの置換がしたいと思いました。なんとかできましたけれども、かなりハマったのでメモを残しておきます。
やりたいこと
<img src="/img/first/title.jpg" srcset="/img/first/title.jpg 1x /img/first/title@2.jpg 2x">
<img src="/img/second/content.png" srcset="/img/second/content.png 1x /img/second/content@2.png 2x">
画像パスの前に、 {{ asset(' を、後ろに ') }} を挿入したい。
どうすればよいか?
画像パスを検索し、ヒットしたものに対して、前後に文字列を付与したものに置換すれば良い。
もっと見ていくと、画像パスは " で囲まれているか、後ろに 半角スペースがある。
Vim のやり方メモ
正規表現のグループ化 は次のように表現する必要がある。
(jpg|png) = /\(jpg\|png\)
参考ページ
まず、検索する
以上を踏まえて、画像パスを検索する表現は次のようになりました。
/\/img\/[^ ]*\.\(jpg\|png\)
途中で [^ ]* を挟んでいます。これで半角スペースにはマッチさせないようにしています。
これがないと、例えば /img/first/title.jpg" srcset="/img/first/title.jpg 1x /img/first/title@2.jpg とマッチしてしまい行内にある複数の画像パスにマッチしませんでした><。
置換するには
上記検索パターン全体をグループ化します。検索結果を置換の一部として用いるためです。
/\(\/img\/[^ ]*\.\(jpg\|png\)\)
ようやく置換する
%s/\(\/img\/[^ ]*\.\(jpg\|png\)\)/{{ asset('\1') }}/g
\1 でマッチした検索結果全体を再利用しています。
結果
<img src="{{ asset('/img/first/title.jpg') }}" srcset="{{ asset('/img/first/title.jpg') }} 1x {{ asset('/img/first/title@2.jpg') }} 2x">
<img src="{{ asset('/img/second/content.png') }}" srcset="{{ asset('/img/second/content.jpg') }} 1x {{ asset('/img/second/content@2.jpg') }} 2x">
おわりに
意外と時間がかかりました。
- 正規表現自体にあまり馴染みがない。
- Vim の正規表現の使い方が独特。
以上が絡み合って、苦労したように思います。
最後に、参考ページです。ありがとうござします!
以上です。