As developers, we often find ourselves needing to search and replace text within our code. While Visual Studio Code offers basic search-and-replace functionality, there are times when we need something more powerful and flexible. This is where the "Replace Conditionally" extension comes in. With its advanced conditional logic, this extension takes your search-and-replace operations to the next level, making them more precise and efficient.

You can install the extension from VS Code Market Place: VS Code ReplaceConditionally
Related YouTube Video link is: Mastering 😎 Text Replacement in VS Code with "Replace Conditionally" Extension

Why "Replace Conditionally"?

The "Replace Conditionally" extension elevates your search-and-replace operations in Visual Studio Code by introducing advanced conditional logic. Whether you're dealing with case sensitivity, whole word matching, or complex regular expressions, this extension has you covered. Let's dive into some of its standout features.

Key Features

Conditional Replace

One of the most powerful features of this extension is its ability to replace text based on various conditions. This feature is perfect for those moments when you need precise control over what gets replaced, ensuring that only the exact text you want to change is affected.

Decoration Updates

Real-time highlighting of text that matches your search conditions is another standout feature. This visual aid ensures you’re targeting the right text without missing a beat. As you type your search query, the matching text is highlighted instantly, providing immediate feedback and enhancing your workflow.

Sidebar Integration

All these powerful features are easily accessible via a convenient sidebar, making your workflow smooth and efficient. The sidebar provides a user-friendly interface where you can configure your search and replace options, add conditions, and see the results in real-time.

How It Works

The "Replace Conditionally" extension offers a variety of options to refine your search and replace operations. Here’s a closer look at each option:

Search Input

The search input allows you to specify the text you want to search for. Depending on your needs, you can enter simple text or use more complex patterns.

Replace Input

The replace input box is where you specify the text that will replace the search text. This can be a straightforward replacement or a more complex one using regular expressions.

Match Case

The match case option ensures that only search words that exactly match the case of the input are targeted. This is particularly useful when dealing with case-sensitive programming languages or when the case of the text matters.

Match Whole Word

The match whole word option ensures that only whole words matching the search input are considered. This is useful when you want to avoid partial matches in other words.

Regular Expression

The extension supports regular expressions, allowing you to execute complex search patterns. Regular expressions can be used to search for patterns like (.*), +, ., and more, providing a powerful tool for advanced search-and-replace tasks.

Skip Spaces/Lines

The skip spaces/lines option skips spaces at the beginning and end of lines, making your search more flexible. This option is particularly useful when dealing with code that has inconsistent spacing or line breaks.

Regex Multiple Selector

The regex multiple selector is an extended version of regex line selection. When enabled, it allows you to skip multiple lines of the element, making it easier to search for complex patterns that span multiple lines.

Conditions

The conditions option allows you to select one of contains, not contains, or exact. These terms are self-explanatory and allow you to replace text if the condition text meets the specified criteria in the line. For multiple line selection, the condition applies to the selected pattern.

Condition Text

The condition text is the text that needs to be checked against the conditions. You can enter any text that should be present (or not present) in the line for the condition to be met.

Add Conditions

You can add multiple conditions to refine your search further. Simply click the "Add Conditions" button to add another condition.

Remove Conditions

The remove conditions option allows you to remove conditions that are no longer needed. This helps keep your search and replacement operations clean and focused.

In Between Conditions

When using multiple conditions, you can choose whether conditions are based on and or or. With and, both conditions must be met to replace the text; with or, if one condition is met, the text is replaced. This logical flexibility makes it easier to create precise search and replace operations.

Clear All

The clear all option clears all input data, allowing you to start fresh with new search and replace parameters.

Refresh

The refresh option refreshes the extension if any unknown errors occur, ensuring that it continues to function smoothly.

Multiple Use Case Examples

To better understand how the "Replace Conditionally" extension can enhance your workflow, let’s look at some practical examples:

Search Example

In this example, I simply searched for the word "primary." As you type, the extension shows the results in real time within the active file, similar to the default VS Code search.

Search Replace Example

Here, I searched for the word "primary" and replaced it with "secondary." The extension performs this operation seamlessly, just like the built-in VS Code search and replace.

Match Case Example

In this example, I searched for the word "index." Initially, it shows every occurrence of the word, regardless of the case. When I enabled the match case option, it only displayed the exact matches, making it easier to target specific instances.

Match Whole Word Example

Searching for the word "i" initially shows every occurrence, even within other words. By enabling the match whole word option, the extension only matches the exact word "i" filtering out partial matches.

Regular Expression Example

Regular expressions provide a powerful way to search for complex patterns. In this example, I used a regular expression to search for a specific pattern. The extension supports various regular expressions, making it versatile for different search needs.

Skip Spaces/Lines Example

Enabling the skip spaces/lines option allows you to skip spaces at the start and end of lines, as well as line breaks. This makes it easier to search for corresponding entries. Be sure to format the document properly after replacement if needed.

Here is another example of Skip Spaces/Lines:

In this example, I used Skip Spaces/Lines with a regular expression. After enabling Skip Spaces/Lines, the extension skips spaces and line breaks, making it easier to match the pattern. This feature is particularly useful with the regex multiple selector, allowing for more complex searches.

Regex Multiple Selector Example

In this example, I searched for "button," but the buttons are different from each other. After enabling the Regex Multiple Selector, the extension considers everything inside the button as one element. This finds multiple patterns in the file. When you paste the text of the search in the replace field it automatically allocates numbers for time-saving. I replaced the second group ($2) with "Changed." Skip Spaces/Lines removed default spaces, which can be fixed by formatting the document or adding spaces in the replace.

Conditions Examples

The conditions feature allows you to perform more precise search and replace operations. Here are some examples:

Single Word with Conditions

In this example, I searched for "secondary" and replaced it with "primary." By applying conditions, the extension checks if the lines of that word include the specified condition. For instance, I first applied the condition if the line contains "Code," highlighting the lines that meet this condition. Then, I added another condition to check if the line contains "//" using an and operation. The extension highlights the lines that contain both "Code" and "//." Finally, I changed the second condition to, not contain “//”, highlighting lines that contain "Code" but not "//." This example demonstrates how you can use logical expressions to refine your search and replace operations.

Multi-Line Pattern with Conditions

In this example, I searched for "Button" using a regex pattern (.*), Skip Spaces/Lines, and Regex Multiple Selector. I copied the search expression into the replace field, and the extension automatically allocated numbers (.*) for time-saving. I then changed the second group ($2) to "Changed" and applied a condition to check if the matched pattern contains id="13". The extension highlighted the buttons that meet this condition. After changing the condition to id="14", I replaced the other buttons, leaving the button id="14" unchanged. This example shows how you can use conditions to perform complex, multi-line search and replace operations.

Get in Touch

I created this extension to enhance the search functionality in VS Code and make your development experience smoother. If you have any questions, or feedback, or just want to connect, feel free to reach out:

GitHub: Meer Mustan
Email: meer.mustan786@gmail.com
X: @meer_mustan
Instagram: @meer_mustan

Thank you for using the "Replace Conditionally" extension! We hope it enhances your development experience and makes your workflow more efficient. Happy coding 👨‍💻🙂