今回は、テキストエディタの「Visual Studio Code」を使用して全てのファイルの指定した特定の要素を好きな文字列に一括置換する方法を紹介します。
サイトリニューアルを行った後に「meta refresh」で全ページに0秒リダイレクトを行いたい場合や、一度決めた共通のクラス名やID名の変更や、URLなどを変更したい時などに1ファイルずつ手作業で行うとページの量によってはかなりの手間がかかってきます。
その様な時に、複数のファイルの中にある特定の記述を一括で変更する方法があれば良いなと思い色々試していたら、都合のいいパターンがあったので、その方法を紹介します。
今回の方法を紹介する前に基本的な文字列の置換方法を知っていると分かりやすいと思うので、知らない方は下記の記事から読む事をおすすめします。
全てのファイルの一つの要素を一括置換する方法
まずは、WEBサイトのデータを全てまとめて一つのファイルにします。
次に、Visual Studio Codeを開きファイル→開く→当該ファイルで全てをまとめたファイルごと開きます。
当該ファイルを開いたら編集→フォルダーを指定して置換を押します。（command +shift +H）
そしたら左側に検索窓が2個出現します。上の窓には置換したい文字列を記入します。下の窓には置換後の文字列を入力します。
例：上→「<head>」
下→「<head>＜meta http-equiv=”refresh” content=”0;URL=https://exsample.co.jp/”＞」
するとファイル内にある全てのファイルに対して検索がかかり、全てのファイル内の検索対象がハイライトされます。また、右画面では各ファイルの元状況と置換後の状況がプレビューとして表示されます。
この状態で置換ボタンを押せば完了です。
一括置換ボタンは左側の検索窓の横にある下記のボタンです。
これを押せば先程一気にハイライトされた全てのファイルの置換対象が指定した文字列に置換されます。
全体置換の例
全体置換は考え方次第では、様々な改修作業に役立ちます。自分なりのパターンを見つけだして効率よく作業をしましょう。
下記は、私が考えた一括置換パターンの例です。是非参考にしてみて下さい。
全てのindexファイルにメタリフレッシュを追加
| <head> |
| <head><meta http-equiv=”refresh” content=”0;URL=https://exsample.co.jp/”> |
全ての特定のclassが付いたh3タグをpタグに変換
| <h3 class=”XXX”> |
| <p class=”XXX”> |
全てのhttpに「s」を付ける
| http:// |
| https:// |
全てのjpgに幅と高さを指定
| .jpg” |
| .jpg” width=”640″ height=”480″ |
以上が「複数ファイルの同じ要素を一回で置換する裏技」でした。
発想次第で無限の可能性を秘めた裏技なので、是非色々と応用して活用してみて下さい。
以下の記事ではVS Codeの便利なショートカットキーをまとめてます。合わせてどうぞ。
