DEV Community

Cover image for VS Code: Search-and-Replace Regex
bob.ts
bob.ts

Posted on • Updated on

VS Code: Search-and-Replace Regex

This is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it. Therefore, I am writing this article as my own reference to a useful tool with VS Code.

Details (Regex Flavor)

The find widget is simply using JavaScript's regular expressions as specified in ECMAScript 5 (the runtime of VS Code) ...

Reference

VS Code has the option to opt into using the Perl based PCRE2 engine. This can be enabled through the settings config.

This allows more advanced regex operations like lookaheads and backreferences. The regex still has to be valid JavaScript regex.

VS Code does support regular expression searches, however, backreferences and lookaround aren't supported by default. But you can enable these with the setting search.usePCRE2. This configures ripgrep to use the PCRE2 regex engine. While PCRE2 supports many other features, we only support regex expressions that are still valid in JavaScript, because open editors are still searched using the editor's JavaScript-based search.

Use Find-And-Replace

You can press Ctrl + H on Windows and Linux, or ⌥⌘F on Mac to enable search and replace tool.

Search-And-Replace Image

Reference

Basically, with some code needing a Search-and-Replace pattern applied ...



const demo = {
  test1: 'test1',
  test2: 'test2',
  test3: 'test3',
  test4: 'test4',
  test5: 'test5',
  test6: 'test6'
};


Enter fullscreen mode Exit fullscreen mode

... with this code, assuming I want to create an index that uses the number within the string, we can use a regex like ... '(.*?)(\d+)'. This regex will select all the text within and including the single-quotes.

If I want something like test1: 'test1', index: 1, then a simple replace of the selection above would become ... '$1$2', index: $2 and the code when all are replaced becomes ...



const demo = {
test1: 'test1', index: 1,
test2: 'test2', index: 2,
test3: 'test3', index: 3,
test4: 'test4', index: 4,
test5: 'test5', index: 5,
test6: 'test6', index: 6
};

Enter fullscreen mode Exit fullscreen mode




Conclusion

Because this is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it, I wrote this article as my own reference to a useful tool with VS Code.

Top comments (18)

Collapse
 
marcohern profile image
Marco Hernandez

What if I need to replace something with $? For example, replace '$var' with '$this->var=$var', the regex to search is easy, the problem is the replacement, I tries with '$this->$1 = $$1', it does not work properly. So how do we go about it?

Collapse
 
rfornal profile image
bob.ts

OK. I see a couple of things going on here.

First, you state you are using '$var', for replacement, this should be '(\$[a-zA-Z]*)'.

  • The parens allow for the selection as $1
  • The backslash allows VS Code to correctly find '$var' in the content as REGEX.

Second, to use '$this->$1 = $$1' as a pattern for replacement ...

  • The selection above in my first response would need changed to something like this '\$([a-zA-Z0-9]*)' to allow for selection of text that starts with a dollar sign.
  • The replacement pattern should be changed to '\$this->=>$1 = $$$1'. The dollar sign in the replacement is "escaped" using the double-dollar-sign (see HERE)
Collapse
 
rfornal profile image
bob.ts

Article written and posted ... here: dev.to/rfornal/vs-code-search-and-...

Collapse
 
rfornal profile image
bob.ts

Having provided a reply, I think I'll write this up as a separate article for clarity. I'll post here when it's complete ... probably in the next day or two. Thanks for the GOOD question!

Collapse
 
ahmedfay profile image
AhmedFay

that's amazing, thanks very much that's helped a lot

Collapse
 
rfornal profile image
bob.ts

Glad it helped!

Collapse
 
lnaie profile image
Lucian Naie • Edited

In case you need to replace something like "NumberInt(2018)" with 2018, e.g. in mongodb json files, this would be the find pattern "NumberInt((.?)(\d+))" with the replace "$2". Or this one "ISODate((.?)(.+))" => $2 to transform "ISODate("2021-06-13T20:00:00.000+0000")" to "2021-06-13T20:00:00.000+0000". Cheers!

Collapse
 
hasantezcan profile image
Hasan TEZCAN

Is that any way to replace regex expression with vsCode extension API?

Collapse
 
rfornal profile image
bob.ts

I'm not quite sure what this question is.

  • Are you asking if a regex expression can be generated with a Visual Studio Code extension? Probably.
  • Are you asking if a regex expression can interact with a Visual Studio Code extension in some way? I don't think so.
Collapse
 
hasantezcan profile image
Hasan TEZCAN

While using vs code you can find and replace some word using with regex. We are using this usage in our daily lives. But my question is Can I do it with vscode API. I want to make a vscode extension with this endpoint So if it exists

Thread Thread
 
rfornal profile image
bob.ts

That's a question I'm not able to answer. I know VS Code by usage as a developer ... not by working on VS Code Extensions. I would assume there would be a way to interact with it via API. You might have to come up with an example and contact the team working on VS Code (it is Open Source, so shouldn't be an issue).

Collapse
 
caleb15 profile image
Caleb Collins-Parks

Where is the option for Perl based PCRE2 engine? I looked in the settings but didn't see it.

Collapse
 
rfornal profile image
bob.ts

OK. I will start by saying that I am not an expert here.

It looks like VS Code, at one time, had a setting to use PCRE2. It has since been deprecated, and PCRE2 is automatically used as a fallback when the default engine doesn't support a feature.

Found this information HERE.

Collapse
 
akp profile image
akp_200

this is really helpful. I can easily understand and even apply in a different situation

Collapse
 
slinkywitch profile image
slinkywitch

Thanks for this! First time I've seen this explained clearly.

Collapse
 
zenitk profile image
Zenit Kovačević

Took me a while to figure that we actually "declare" a param in our regex with ( and ).

Thanks! By helping yourself you also helped others.

Collapse
 
rfornal profile image
bob.ts

I’ll go back and look at the article to see if I can clarify that better.

Collapse
 
danielscatignoncpc profile image
Daniel Guimarães Scatigno

Wow thats nice, using $1 its what I was looking for