VSCode RegEx Find and Replace – Guides and Recipes

VS Code is a text editor which aimed primarily at software programmers, released by Microsoft back in 2015. It is open-source, cross-platform, supports many languages, but hugely popular among web developers. In terms of features and usability, it is one of the best when it comes to free source code editors. At the time of this writing, VS Code has more than 15 million active users which make it one of the most used products from Microsoft in recent years.

VSCode supports finding and replacing text in two scopes: project-level and file-level.

This article is going to show you VSCode supported Regex flavors , how to use Regex in VSCode, as well as a few handy VSCode Regex recipes that you will use a lot in your workflow.

VSCode Regex flavor

Talking about Search and Replace, you should know that VSCode supports the feature in two forms.

You may already know how to search and replace text in a single file, by pressing Ctrl + H keyboard shortcut, like you normally do in nearly every editor. In the next section, we will refer to this as the File Widget Search & Replace

But VSCode also supports search and replace text in all files as long as it belongs to a project/directory by using the “magnify” button in the left sidebar. We will refer to this as the Files Sidebar Search & Replace

search and replace text in all files as long as it belongs to a project/directory

Rust Regex flavor in the Find/Replace in Files Sidebar

Rob Lourens wrote that the file search uses Rust regex. The Rust language documentation describes the syntax.

Rob Lourens on GitHub

JavaScript Regex in the Find/Replace in File Widget

According to Alexandru Dima, the find & replace in File Widget uses JavaScript regex flavor. More details about this flavor can be found at ECMAScript 5’s documentation and MDN JavaScript Regular Expression Guide.

Alexandru Dima on GitHub

VSCode PCRE2 regex engine

The default RegEx engine of VSCode does not supports advanced regex operations like backreferences and lookahead assertions. Fortunately, VSCode can switch to the Perl based PCRE2 engine

Back before VSCode 1.29, you can optionally enable the PCRE2 using search.usePCRE2 setting. But now, thanks to some upstream work in ripgrep, you can now use these features without enabling a special setting if you’ve updated the latest version of VSCode.

Please do note that ripgrep will fall back to the PCRE2 engine automatically if the regex uses a feature that isn’t supported by the Rust regex engine, and search.usePCRE2 is now deprecated. And the regex still has to be valid JavaScript regex.

How to enable VSCode regex replace

First, you need to press Ctrl + H on Windows and Linux, or ⌥⌘F on Mac to open up search and replace tool.

In order to activate regex search and replace in VSCode, you have to click on the .* button near the input.

enable VSCode regex replace

Regex replace multiline

VSCode search and replace widget supports searching for newlines natively, even without regex mode. You can paste the search string with newlines included right in the input and it will do its job.

If you prefer to type the input, you’ll notice that you can’t use the Enter/Return key to add a newline. In VSCode search box, Ctrl + Enter is the keyboard combo to insert a new line.

insert newlines by copy pasting

If you use the global search (in the sidebar), you can either insert newlines by pressing Ctrl + Enter or Shift + Enter.

insert newlines  in global search using keyboard shortcuts

Alternatively, you can switch to regex mode by clicking on the .* button near the search input, then use \n to match the newline character literally.

Regex match beginning or end of line

In VSCode regex mode, like most editors, you can use ^ symbol to match the beginning of a line and $ symbol to match the end of a line.

Add prefix to lines

Knowing that ^ symbol matches the beginning of a line, we can use it to add prefix to multiple lines at the same time.

In this example, we combine ^ with regex capture groups to add https:// to lines that has github.io string: search for ^(.+?github.io) and replace with https://$1, with $1 is the string captured in parentheses. You can use the same method to add anything to the beginning of lines.

Add prefix to lines using regex

Add suffix to lines

Similarly, knowing that $ symbol matches the end of a line, we can use it to add suffix to matched lines.

In this example, we combine $ with regex capture groups to add a slash (/) to all lines : search for (.+?)$ to match any lines that has content and replace with $1/. You can use the same method to insert suffix to the end of lines in other scenario.

Add suffix to lines

Regex replace with capture groups

VSCode now supports capture groups natively. Given a regular expression of (foobar1)x(foobar2) you can reference the first group using $1 and the second one using $2 in the replace string. For example :

Find Carrots(With)Dip(Are)Yummy Replace Bananas$1Mustard$2Gross Result BananasWithMustardAreGross

If you’re an absolute beginner and not that familiar with either VSCode or Regex, follow the steps below to find and replace text using capture groups.

  • In the “Find” input box, you can use regex with “capturing groups,” e.g. I want to find (group1) and (group2), using parentheses. This would find the same text as I want to find group1 and group2, but with the difference that you can then reference group1 and group2 in the replace string.
  • In the “Replace” input box, you can refer to the capturing groups using $1, $2 and so on. The text that matches the “Find” input would be replaced with I found $1 and $2 having a picnic, which would output I found group1 and group2 having a picnic.

Notes:

  • Instead of just a string, anything inside or outside the () can be a regular expression.
  • $0 refers to the whole match

Regex replace to lowercase/uppercase

Regular expressions are powerful. Besides capture groups/backreferences, you can use regex to convert matched strings to uppercase or lowercase.

Capitalize matched groups

In order to convert regex matched capture group to uppercase, we would use either \U or \u.

\U will transform every single matched characters into uppercase.

transform every single matched characters into uppercase

Meanwhile, \u capitalize only the first character of the matched capture groups.
capitalize only the first character of the matched capture groups

Convert matched groups to lowercase

In order to convert regex matched capture group to uppercase, we would use either \L or \l.

Similarly, \L will lowercase the whole matched group string.

lowercase the whole matched group string

\l will convert the first character of the matched group into lowercase character.

convert the first character of the matched group into lowercase character

VSCode Regex FAQ

  1. Which Regex Flavor does VSCode uses?

    Rust Regex flavor in the Find/Replace in Files Sidebar and JavaScript Regex in the Find/Replace in File Widget

  2. How to insert newlines in search string in VSCode?

    You can either press Ctrl + Enter or Shift + Enter to insert newlines in search string in VSCode

  3. How to find and replace strings with the lowercase version of them?

    Wrap the search string in parentheses, like (match_group) and replace it with \L$1.

We hope that the article offer useful information on how to use regular expressions effectively in VSCode and further improve your programming workflow. You may want to check out our other guides on Automate your workflow with VSCode Tasks , Format JSON in VSCode or Fix IntelliSense in VSCode. All our VSCode tutorials can be found at VSCode Tutorials.

If you have any question, don’t hesitate to let us know in the comments section below.

Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment