233

I want to use "Search And Replace" in Visual Studio Code to change every instance of <h1>content</h1> to #### content within a document using a Regular Expression.

How can I accomplish that?

doğukan
  • 23,073
  • 13
  • 57
  • 69
Tom
  • 4,070
  • 4
  • 22
  • 50
  • 3
    Does it have to be a regex find and replace? Could you just replace `

    ` with `#### ` and then replace `

    ` with `''`?     – Brett East Apr 23 '17 at 23:23

5 Answers5

363

So, your goal is to search and replace?
According to Visual Studio Code's keyboard shortcuts PDF, you can press Ctrl + H on Windows and Linux, or ⌥⌘F on Mac to enable the search and replace tool:

Visual studio code's search & replace tab If you mean to disable the code, you just have to put <h1> in search, and replace to ####.

But if you want to use this regex instead, you may enable it in the icon: .* and use the regex: <h1>(.+?)<\/h1> and replace to: #### $1.

And as @tpartee suggested, here is some more information about Visual Studio's engine if you would like to learn more:

Edric
  • 24,639
  • 13
  • 81
  • 91
Mateus
  • 4,863
  • 4
  • 24
  • 32
  • 3
    Visual Studio will handle the regex like every other application, the only difference is the so-called regex flavors, which is the 'compiler' of the regex and how will it treat the expression. Usually, it's ignored in answers like these because most of them are pretty similar, but for those who still want to check it out, I've added it to the answer – Mateus Sep 06 '17 at 18:57
  • 5
    The question is about Visual Studio Code, and this answer is about Visual Studio. – Dustin Wyatt May 17 '18 at 21:34
  • 1
    or change your Keybindings. Example: By IDEA Keybindings (https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings) you could use: Ctrl+Shift+R for Replace in Path or for Find In Path: Ctrl+Shift+F – SL5net Jan 17 '19 at 07:32
  • It works for me. I need to replace image reference in 100 places from a folder abc to xyz. I used below FIND: \/abc\/(.+?).gif replace: /xyz/$1.gif – Banketeshvar Narayan Nov 12 '21 at 06:16
83

For beginners, I wanted to add to the accepted answer, because a couple of subtleties were unclear to me:

To find and modify text (not completely replace),

  1. In the "Find" step, you can use regex with "capturing groups," e.g. your search could be la la la (group1) blah blah (group2), using parentheses.

  2. And then in the "Replace" step, you can refer to the capturing groups via $1, $2 etc.

So, for example, in this case we could find the relevant text with just <h1>.+?<\/h1> (no parentheses), but putting in the parentheses <h1>(.+?)<\/h1> allows us to refer to the sub-match in between them as $1 in the replace step. Cool!

Notes

  • To turn on Regex in the Find Widget, click the .* icon, or press Cmd/Ctrl Alt R

  • $0 refers to the whole match

  • Finally, the original question states that the replace should happen "within a document," so you can use the "Find Widget" (Cmd or Ctrl + F), which is local to the open document, instead of "Search", which opens a bigger UI and looks across all files in the project.

ultraGentle
  • 5,084
  • 1
  • 19
  • 45
  • 6
    Online regex tools are also very helpful to beginners for writing the regex in the first place. Also, use find with your regex to make sure it's actually getting what you want and **manually replace the first few entries before you replace all** to make sure the result is what you think it is. – silvertiger Aug 24 '20 at 18:00
  • 1
    Adding on to @silvertiger, here are two editors I use on a day to day: https://regex101.com, https://regexr.com – Jaacko Torus Aug 12 '22 at 16:05
13

If you want for example, change all country codes in .json file from uppercase to lowercase:

Ctrl+h
Alt+r
Alt+c

Find: ([A-Z]{2,})
Replace: $1

Alt+Enter
F1
type: lower -> select toLowerCase
Ctrl+Alt+Enter

example file:

[
  {"id": "PL", "name": "Poland"},
  {"id": "NZ", "name": "New Zealand"},
  ...
]
Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
Michal S.
  • 385
  • 4
  • 6
  • This is not an answer to OP, but I came here from google search and that works... but how? Ctrl + H - Open replacement window. Not really necessary, can be Ctrl + F. Alt + R - toggle regex. Alt + C - toggle case matching. Alt+Enter - Search Editor: Open Results in Editor. This is where the magic happens, it selects **ALL** occurrences of the search phrase in the document. F1 - Open command palette. Ctrl + Alt + Enter - Not sure what it does, you can just press enter. – Terax Jun 14 '23 at 23:06
0

Make sure Match Case is selected with Use Regular Expression so this matches. [A-Z]* If match case is not selected, this matches all letters.

David Morrow
  • 262
  • 4
  • 9
0

I use this line in html to find the structure of a page I'm not familiar with. Inline styling: style="border: 4px solid differentColors;" and at the end I remove it. In VSCode, if I searched for style="border: 4px solid(.+?);" using the regex option it doesn't find anything but Atom does, so, I use Atom to remove the inline styling.

Lloyd
  • 1