Replace With Regex Using VSCode
Published: June 7, 2024
Background
Imagine you have a long list of stuff that looks like this:
let data = [
{image: house.jpg},
{image: kitchen.jpg},
{image: bedroom.jpg},
{image: rooftop.jpg},
{image: terrace.jpg},
]And that you decided to have 2 images instead. One thumbnail image and one large image to serve on your website.
So you want add some more elements into your array in order to make it look like below:
data = [
{image: {large: house.jpg, small:houseSmall.jpg}},
{image: {large: kitchen.jpg, small:kitchenSmall.jpg}},
{image: {large: bedroom.jpg, small:bedroomSmall.jpg}},
{image: {large: rooftop.jpg, small:rooftopSmall.jpg}},
{image: {large: terrace.jpg, small:terraceSmall.jpg}},
]How can we do this?
Method
As you can see, this is not a simple find & replace. We need to keep track of what is inside each object (bedroom, rooftop, etc) and keep them in memory somehow and make a replacement.
Luckily, VSCode lets us do this in its find & replace function.
Open VSCode. Open up Find & Replace function by pressing CTRL+F. Turn on Regex option (Rightmost button)
Now we need to enter the regex function so that we can target what is after image in each item.
The regex expression we use in this case is (?<=image: )(.*)(?=.jpg \})
This helps us target all items that are in between image: and
.jpg }
This is how it works:
You can see that it has selected 5 items correctly. Now we needed to put them into memory when we do the replacement.
This is where $1 comes into play. What
this does is that, it keeps track of what was found. Then
$1 can be used when replacing things to
refer back to those values.
In our case, this is what we'd need to write in our replace area: {large:$1.jpg, small:$1Small
And click on Replace all button.
Tada!
We have more or less achieved our objective, but in order to complete this, let's add one more curly bracket to each item:
Voila!
Conlusion
In this post, we have found a way to replace things using regex while keeping find results in memory on VSCode.
Making this kind of find - replace was a pain in the ass for me personally, especially for long arrays, but now this will help me reduce my workload a little bit.
Hope it was helpful for you too.
Happy hacking!
Leave comment
Comments
Check out other blog posts
2024/06/19
Create A Simple and Dynamic Tooltip With Svelte and JavaScript
2024/06/17
Create an Interactive Map of Tokyo with JavaScript
2024/06/14
How to Easily Fix Japanese Character Issue in Matplotlib
2024/06/13
Book Review | Talking to Strangers: What We Should Know about the People We Don't Know by Malcolm Gladwell
2024/06/07
Most Commonly Used 3,000 Kanjis in Japanese
2024/06/06
Do Not Use Readable Store in Svelte
2024/06/05
Increase Website Load Speed by Compressing Data with Gzip and Pako
2024/05/31
Find the Word the Mouse is Pointing to on a Webpage with JavaScript
2024/05/29
Create an Interactive Map with Svelte using SVG
2024/05/28
Book Review | Originals: How Non-Conformists Move the World by Adam Grant & Sheryl Sandberg
2024/05/27
How to Algorithmically Solve Sudoku Using Javascript
2024/05/26
How I Increased Traffic to my Website by 10x in a Month
2024/05/24
Life is Like Cycling
2024/05/19
Generate a Complete Sudoku Grid with Backtracking Algorithm in JavaScript
2024/05/16
Why Tailwind is Amazing and How It Makes Web Dev a Breeze
2024/05/15
Generate Sitemap Automatically with Git Hooks Using Python
2024/05/14
Book Review | Range: Why Generalists Triumph in a Specialized World by David Epstein
2024/05/13
What is Svelte and SvelteKit?
2024/05/12
Internationalization with SvelteKit (Multiple Language Support)
2024/05/11
Reduce Svelte Deploy Time With Caching
2024/05/10
Lazy Load Content With Svelte and Intersection Oberver
2024/05/10
Find the Optimal Stock Portfolio with a Genetic Algorithm
2024/05/09
Convert ShapeFile To SVG With Python
2024/05/08
Reactivity In Svelte: Variables, Binding, and Key Function
2024/05/07
Book Review | The Art Of War by Sun Tzu
2024/05/06
Specialists Are Dead. Long Live Generalists!
2024/05/03
Analyze Voter Behavior in Turkish Elections with Python
2024/05/01
Create Turkish Voter Profile Database With Web Scraping
2024/04/30
Make Infinite Scroll With Svelte and Tailwind
2024/04/29
How I Reached Japanese Proficiency In Under A Year
2024/04/25
Use-ready Website Template With Svelte and Tailwind
2024/01/29
Lazy Engineers Make Lousy Products
2024/01/28
On Greatness
2024/01/28
Converting PDF to PNG on a MacBook
2023/12/31
Recapping 2023: Compilation of 24 books read
2023/12/30
Create a Photo Collage with Python PIL
2024/01/09
Detect Device & Browser of Visitors to Your Website
2024/01/19
Anatomy of a ChatGPT Response