Introduction

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.

Scenario

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.

Solution

In short, the plan was simple:

1. Backup website files and database
2. Disable the Enlighter plugin from the WordPress backend
3. Download a backup of the SQL database from MySQL
4. Open the database in Visual Studio Code
5. Using Regex Find & Replace Enlighter code blocks with WordPress standard ones
6. Overwrite the existing database with our modified SQL file so our changes are reflected

Understanding Wildcards & Escape Characters

Wildcards

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.

Escape Characters

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.

Sample Code Blocks

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 -->

Regex Based Find & Replace

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 -->

1. The first wildcard (.+?) allows the code block in the database to be styled to any type of language. The beginning part of the class name "Englighter" is retained for accuracy.
2. The second wildcard (.+?) is to allow the regex query to take into account any additional classes that may be assigned to the Enlighter block.
3. The first wildcard (.+?) is used to get the content between the <pre> tags, this will be used in the replacement regex query.
4. Any \ have been replaced with \\ so that regex does not recognise them as escape characters when running the find and replace.

Replace:

<!-- wp:code -->\\n<pre class=\\"wp-block-code\\"><code>$3</code></pre>\\n<!-- /wp:code -->

1. The content from the Enlighter clock is the third wildcard in the find query above and is printed between the <code> tags with $3.
2. Any \ have been replaced with \\ so that regex does not recognise them as escape characters when running the find and replace.

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.