In the world of coding and text editing, precision and efficiency are paramount. When working with large codebases or complex documents, the ability to locate and modify specific strings of text swiftly can significantly enhance productivity.
Visual Studio Code, a popular and versatile code editor, offers a powerful feature set for this purpose. In this guide, we'll explore the art of "Efficient Find & Replace with Wildcard and Escape Characters" in Visual Studio Code.
Whether you're a seasoned developer seeking to streamline your workflow or a novice looking to harness the full potential of this tool, this tutorial will equip you with the knowledge and techniques needed to efficiently search for, locate, and replace text using wildcard and escape characters, making your coding and text editing tasks smoother and more effective. Let's dive in and unlock the potential of this invaluable feature.
In a recent piece of work, one of our customers wanted to make their website more secure due to it previously getting compromised. They were using WordPress CMS with many different plugins installed. Our first recommendation was to clean the website and database up by removing unused tables and deleting plugins that were no longer required.
One of the plugins installed in their WordPress instance was called Enlighter, this plugin was used to highlight syntax and make it look pretty. The issue was that you could not simply disable/delete it and forget about it due to it writing Enlighter-specific HTML blocks and CSS classes. Removing it this way would result in the thousands of blocks already created inside of blog posts and pages being unstyled and not matching the design of the website.
In short, the plan was simple:
The wildcard character inside of Visual Studio Code when using REGEX is:
(.+?)
The wildcard can be used multiple times within a search query using REGEX. The output/wildcard match can be printed with:
$1 - First wildcard match
$2 - Second wildcard match
$3 - Third wildcard match
For example, if I have the following block of text:
Hello my name is Gerrard and I am 20 years old. Whats your name and age?
Hello my name is Lucy and I am 25 years old. Whats your name and age?
Hello my name is Tony and I am 38 years old. Whats your name and age?
Hello my name is Harold and I am 46 years old. Whats your name and age?
We could search for the following in Visual Studio Code REGEX:
Hello my name is (.+?) and I am (.+?) years old. Whats your name and age?
And replace with the following in Visual Studio Code REGEX:
$1 is $2 years old.
Then the output would change to:
Gerrard is 20 years old.
Lucy is 25 years old.
Tony is 38 years old.
Harold is 46 years old.
When performing a REGEX query inside of Visual Studio Code it's important to understand the use of escape characters.
You have to escape \ within your search query to prevent REGEX from interpreting query errors, to do this we can simply add an extra \ so anywhere we see \ it turns into \\. For example in REGEX this:
<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">HELLO WORLD</pre>
Would turn into this:
<pre class=\\"EnlighterJSRAW\\" data-enlighter-language=\\"generic\\">HELLO WORLD</pre>
A good article about escape characters can be found here.
Old code block (generated by Enlighter):
<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">HELLO WORLD</pre>\n<!-- /wp:enlighter/codeblock -->
New code block (generated by WordPress):
<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>HELLO WORLD</code></pre>\n<!-- /wp:code -->
To replace all of the old Enlighter code blocks with the WordPress default ones we can use the following regex queries on the database when it's opened in Visual Studio Code:
Find:
<!-- wp:enlighter/codeblock -->\\n<pre class=\\"Enlighter(.+?)\\"(.+?)">(.+?)</pre>\\n<!-- /wp:enlighter/codeblock -->
Replace:
<!-- wp:code -->\\n<pre class=\\"wp-block-code\\"><code>$3</code></pre>\\n<!-- /wp:code -->
When running find and replace from within Visual Studio Code ensure that the regex option is selected like it is below:
After replacing all references to the old type code block (Enlighter) with the built-in WordPress code block the database file (SQL) can be saved and reuploaded as a fresh database for the website.
After a SQL import on the database, the code blocks on the website should now be using WordPress instead of Enlighter.
For more useful articles please go to our Knowledgebase Index to view the latest posts. Alternativly search the Knowledgebase from the search bar at the top of the page.