Visual Studio Code Search and Replace with Regular Expressions
RegexVisual Studio-CodeRegex Problem Overview
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?
Regex Solutions
Solution 1 - Regex
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:
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:
- Find and Replace Window (documentation)
- Quick Replace, Find and Replace Window (documentation)
- What flavor of Regex does Visual Studio Code use?
Solution 2 - Regex
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),
-
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. -
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 pressCmd/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
orCtrl
+F
), which is local to the open document, instead of "Search", which opens a bigger UI and looks across all files in the project.
Solution 3 - Regex
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"}, ...]
Solution 4 - Regex
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.
Solution 5 - Regex
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.