Visual Studio Codeの一括選択機能と正規表現

今回は正規表現です。
Visual Studio Codeの一括選択機能が便利なので正規表現と組み合わせれば色々できます。
ちょっとやってみます。

尚、正規表現の記述方法や書式については触れません。

今回やること

リンクの書き方をミスった過去の記事を正規表現+一括選択を使って修正していく。
だいぶ限定的な内容ですね。
ですが、応用を利かせればかなり便利です。

具体的には

僕はMarkdown形式でブログの記事を書いてます。
ただ、画像リンクの貼り方をミスってしまいました。
しかもたくさん(記事数で言えば30程度)。
リンク数で言えば100超。クソが!!

  • 現状のリンクの書き方
![インストーラの起動](http://www.premium-tsubu-hero.net/wp-content/uploads/2020/06/vscode-installer.png)
  • 本当はこうしたかった書き方
[![インストーラの起動](http://www.premium-tsubu-hero.net/wp-content/uploads/2020/06/vscode-installer.png)](http://www.premium-tsubu-hero.net/wp-content/uploads/2020/06/vscode-installer.png)

ただ画像を貼るだけでは、画像が縮小化されて文字がつぶれてしまいます。
なので、画像をクリックしたら正規の大きさで見れるようにするのが一般的(?)です。
上の書き方だと正規のサイズの画像が見れません。

数も多いし困った。どうしよう。

解決策

正規表現 + 一括選択

手順の全体像

とりあえず手順の全体像

wordpress-regex-modify.gif

詳細手順

  1. Ctrl + Fで検索ボックスを開き(.*)を選ぶ

wordpress-regex-searchbox-1

  1. 正規表現で検索条件を書く
!\[.*\]\(.*\)

条件に合致するものをハイライトしてくれる

wordpress-regex-mod-01

検索ボックスにフォーカスが当たってるかもしれないので、テキストエリアを選択する。

  1. Ctrl + Shift + L でハイライト部分を選択

wordpress-regex-mod-02

白くなって選択状態になりました。

  1. [ を押す。

Visual Studio Codeの役に立つ機能。
選択箇所の両側をカッコで括る機能(正式名称は知りません)。
たまに煩わしいけど今日は頼りになります。

wordpress-regex-mod-03

  1. 正規表現でURLをカッコつきの条件を指定します。

ついでに、Ctrl + Shift + L でハイライト部分を選択します。
Ctrl + Cでコピーします。

\(https://www.premium-tsubu-hero.net/.+\)
  1. カーソル移動します。

wordpress-ikkatsu-select-cursor-move

  1. ペーストします。

個々のカーソル毎にコピーしているという驚き

wordpress-regex-mod-04

まとめ

これが無料ですってよ!!

おわり


VSCodeの使い方はこの辺にまとめています。
よろしければどうぞ。→ Visual Studio Code

PR

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です