VSCodeでRegexを使用してReplaceする方法
出版日: 2024年6月7日
背景
次のような長いリストを持っていると想像してください:
let data = [
{image: house.jpg},
{image: kitchen.jpg},
{image: bedroom.jpg},
{image: rooftop.jpg},
{image: terrace.jpg},
]そして、代わりに2つの画像、1つのサムネイル画像と1つの大きな画像をウェブサイトに表示することを決めたとします。
それで、以下のように配列にもう少し要素を追加したいとします:
data = [
{image: {large: house.jpg, small:houseSmall.jpg}},
{image: {large: kitchen.jpg, small:kitchenSmall.jpg}},
{image: {large: bedroom.jpg, small:bedroomSmall.jpg}},
{image: {large: rooftop.jpg, small:rooftopSmall.jpg}},
{image: {large: terrace.jpg, small:terraceSmall.jpg}},
]これをどうやって行いますか?
方法
ご覧の通り、これは単純な検索 & 置換ではありません。各オブジェクト（ベッドルーム、ルーフトップなど）の中身を追跡し、何らかの方法で記憶し、置換を行う必要があります。
幸いなことに、VSCodeはこれを検索 & 置換機能で行うことができます。
VSCodeを開きます。CTRL+Fを押して検索 & 置換機能を開きます。正規表現オプション（最も右のボタン）をオンにします。
次に、各アイテムのimageの後をターゲットにするために正規表現を入力する必要があります。
この場合に使用する正規表現は(?<=image: )(.*)(?=.jpg \})です。
これにより、image: と.jpg }の間にあるすべてのアイテムをターゲットにすることができます。
これは以下のように機能します:
5つのアイテムが正しく選択されているのがわかります。次に、置換時にこれらをメモリに保持する必要があります。
ここで、$1が役立ちます。これにより、見つかった内容を追跡します。そして$1は置換時にこれらの値を参照するために使用されます。
今回の場合、置換エリアに書き込む必要があるのは次のようになります: {large:$1.jpg, small:$1Small
すべて置換ボタンをクリックします。
タダン！
ほぼ目的を達成しましたが、これを完了するために、各アイテムにもう1つの波括弧を追加しましょう:
ボヤラ！
結論
この投稿では、VSCodeで検索結果をメモリに保持しながら、正規表現を使用して置換する方法を見つけました。
この種の検索 - 置換は、特に長い配列に対しては個人的にとても面倒でしたが、これで少しでも作業負荷を減らすことができるでしょう。
あなたにとっても役に立てば幸いです。
ハッキングを楽しんでください！
このブログは英語からChatGPTによって翻訳されました。不明な点がある場合は、お問い合わせページからご連絡ください。
コメントを残す
コメント
その他のブログ
2024/06/19
SvelteとJavaScriptを使用してシンプルで動的なツールチップを作成する
2024/06/17
JavaScriptを用いて東京都のインタラクティブな地図を作成する
2024/06/14
Matplotlibで日本語文字化けを解決できる簡単な方法
2024/06/13
書評 | トーキング・トゥ・ストレンジャーズ 「よく知らない人」について私たちが知っておくべきこと by マルコム・グラッドウェル
2024/06/07
日本語で最もよく使われる3000字の漢字
2024/06/06
SvelteではReadable Storeを使用するな
2024/06/05
GzipとPakoでデータを圧縮してWebサイトのローディング速度を上げる方法
2024/05/31
JavaScriptを使用してWebページ上でマウスが指している単語を特定する
2024/05/29
SvelteとSVGを用いてインタラクティブな地図を作成する
2024/05/28
書評 | Originals 誰もが「人と違うこと」ができる時代 by アダム・グラント & シェリル・サンドバーグ
2024/05/27
Javascriptを使用して数独を解く方法
2024/05/26
ウェブサイトへのトラフィックを1か月で10倍に増やした方法
2024/05/24
人生はサイクリングに似ている
2024/05/19
JavaScriptでバックトラッキング・アルゴリズムを用いて完全な数独グリッドを生成する
2024/05/16
Tailwindが素晴らしい理由とWeb開発をいかに楽にするか
2024/05/15
PythonとGitフックを使用してサイトマップを自動的に生成する
2024/05/14
書評 | Range (レンジ) 知識の「幅」が最強の武器になる by デイビッド・エプスタイン
2024/05/13
SvelteとSvelteKitはなんですか？
2024/05/12
SvelteKitで国際化（多言語化）
2024/05/11
SvelteでCachingを用いてDeploy時間を短縮する方法
2024/05/10
SvelteとIntersection Oberverによるレイジーローディング
2024/05/10
遺伝的アルゴリズムで最適な株式ポートフォリオを作る方法
2024/05/09
Pythonを用いてShapeFileをSVGに変換できる方法
2024/05/08
Svelteの反応性：変数、バインディング、およびキー関数
2024/05/07
書評 | 孫子の兵法
2024/05/06
スペシャリストは終了。ゼネラリスト万歳！
2024/05/03
トルコ人の有権者の投票行動をPythonでの分析
2024/05/01
Seleniumを用いてトルコ投票データベースを作る方法
2024/04/30
SvelteとTailwindを使用してInfinite Scrollできる方法
2024/04/29
1年間以内で日本語を駆使できるようになるための方法
2024/04/25
SvelteとTailwindを用いたWebサイトテンプレート
2024/01/29
怠惰なエンジニアとひどいデザイン
2024/01/28
偉大さについて
2024/01/28
MacBook で PDF を PNG に変換する
2023/12/31
2023年振り返り：24冊の読んだ本のまとめ
2023/12/30
Python PILを使用して写真コラージュを作成する方法
2024/01/09
ウェブサイトの訪問者のデバイスとブラウザを検出する方法
2024/01/19
ChatGPT回答の解析