# Search and replace in VS Code using Regular Expressions

> Learn how to search and replace in VS Code using regular expressions with capturing groups, referencing matches with $1 and $2 to fix thousands of files.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-06-28 | Topics: [Tools](https://flaviocopes.com/tags/tools/) | Canonical: https://flaviocopes.com/vscode-search-replace-regex/

I had the need to do a rather big change in the repository of my website.

I have hundreds of markdown files and in my markdown I sometimes include images with spaces, mostly because they are screenshots so the format is like

```
Screen Shot 2021-10-16 at 09.45.47.png
```

The string to load the image is:

```
![Alt text](/images/vscode-search-replace-regex/Screen_Shot_2021-10-16_at_09.45.47.png)
```

This worked fine in Hugo up to the version I had installed, but recently in version 0.100 they removed the support for the Markdown library I was using, named Blackfriday, and now only Goldmark is supported, which does not allow spaces in images any more (among other changes).

And I really had to update my site to keep up with Hugo as I was using an older version, 10 months old.

There goes my problem. I needed to update all my images links.

Well, not really. I could wrap the image name in `<>`:

```
![Alt text](/images/vscode-search-replace-regex/Screen_Shot_2021-10-16_at_09.45.47.png)
```

and things work again.

I just have to search and replace all of them!

I have thousands of those, not something I'm going to do.

So I remembered VS Code has regular expressions in its find / replace functionality. 

After a bit of experimentation, using a Regex like this:

```
!\[(.+)\]\((.*\s+.*)\)
```

I was able to create 2 capturing groups, one for the alt text and one for the filename.

![VS Code search panel with regex pattern to find Markdown images with spaces in filenames](https://flaviocopes.com/images/vscode-search-replace-regex/Screen_Shot_2022-06-28_at_17.51.44.jpg)

Then in the replace box I could use $1 for the alt text and $2 for the filename:

![VS Code replace box showing captured groups $1 and $2 being used to wrap filenames with angle brackets](https://flaviocopes.com/images/vscode-search-replace-regex/Screen_Shot_2022-06-28_at_17.52.45.jpg)

```
!\[\]\((.*\s+.*)\)
```

and this replacement string `![](https://flaviocopes.com/images/vscode-search-replace-regex/$1)`_worked_for_the_images_without_alt_text_(I_know,_I_know...):

![VS Code search results showing 808 matches for images without alt text across 226 files](https://flaviocopes.com/images/vscode-search-replace-regex/Screen_Shot_2022-06-28_at_17.53.42.jpg)

How did I come up with those regular expressions?

Mostly through my [JavaScript Regular Expressions tutorial](https://flaviocopes.com/javascript-regular-expressions/#capturing-groups).

I wrote that a while ago, but it's still my go-to resource.

Then some googling and https://regex101.com for quickly testing the regex.

(These days I use my own [regex tester](https://flaviocopes.com/tools/regex-tester/) for that — it highlights matches and explains each token of the pattern.)

Regular expressions still feel a bit magic to me, but sometimes it's the only tool that can do the job. 

Like in this case.