Find and replace like a pro. Regular expressions in VS Code
Tags: vscode, webdev, frontend, react
Published: 2023-11-02 09:53:33

### Table of contents:
- [What is regular expressions](#what-is-regex)
- [Capturing groups](#capturing-groups)
- [Regex in VS Code](#regex-in-vs-code)
- [Conclusion](#conclusion)

<h2 id="what-is-regex">What is regular expressions?</h2>

> Regular expressions (also called regex) are patterns used to match character combinations in strings [[MDN]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions)
> 

For example, regex `/popular|expressions/` will match word **expressions** in sentence "Regular expressions entered popular use from 1968".


![Regexp example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an92b9mrmvvgxsgbvlq6.png)


<h2 id="capturing-groups">Capturing groups</h2>

> Groups group multiple patterns as a whole, and capturing groups provide extra submatch information when using a regular expression pattern to match against a string. [[MDN]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences)
> 

Usually, to create capturing group you should use parentheses and put group regex into it. It’s very convinient when you want to use this group later.
 
For example we can use `/const (.*) = /` to capture variable name (`getUser`) from code `const getUser = () => {...}` into group.

![Regexp group example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6mbzpvvkj6t1tqalnk1.png)

<h3>JS Example</h3>
In JavaScript as a result of `.match()` we get an array where first item is a whole match and other items are captured groups.

```js
const text = "const getUser = () => {…}";
const regex = /const (.*) = /;

const match = text.match(regex);
console.log(match); // ['const getUser = ', 'getUser']
```

<h2 id="regex-in-vs-code">Regex in VS Code</h2>

In VS Code you can efficiently search and replace some text in your project. Often you don't need regex for that. But sometimes regular expressions can save a lot of time (for instance, during refactoring).

VS Code allows us to use captured groups in replace section as `$1` `$2` `$3` `$n` (where 1,2,3..n is a group number)

For example, in React you can easily switch between general TS function types to `React.FC` types:

![VS Code replace example (to React.FC)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m22wo98s95kcrnfb98gy.png)


![VS Code replace example (from React.FC)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uv8rv1qusz4obr5iuqlu.png)


<h2 id="conclusion">Conclusion</h2>

Regular expressions is a powerful tool when you want to search some patterns in text. As developers we can use it not only in the code itself (e.g. phone number validation), but also to simplify some tasks we face.

If you want to learn more about regular expressions, I want to suggest you these resources:

- [regex101](https://regex101.com) - there you can test your regular expressions and get some hints
    
    ![regex101](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fj3w7flsoluvp2djiqt.png)


    
- Regular Expressions course on FreeCodeCamp (as part of [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#regular-expressions))