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

VS Code: Search-and-Replace Regex

rfornal profile image bob.js ・2 min read

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'
};

... 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
};

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.

Posted on by:

rfornal profile

bob.js

@rfornal

REAL, FUN, GEEK who is passionate about Front-End!

Discussion

pic
Editor guide
 

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?

 

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)
 

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!

 

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

 

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

 

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

 

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.

 

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