Find and replace text using regular expressions

When you want to search and replace specific patterns of text, use regular expressions. They can help you in pattern matching, parsing, filtering of results, and so on. Once you learn the regex syntax, you can use it for almost any language.

The IDE uses Java Regular Expressions, which are the regular expressions included in the JDK that the IDE runs on. For more information about patterns, please refer to Class Pattern at docs.oracle.com. These expressions are mostly, but not entirely, PCRE (Perl Compatible Regular Expressions) compatible.

Press Ctrl+R to open the search and replace pane.
If you need to search and replace in more than one file, press Ctrl+Shift+R. For more information, refer to Search for a target within a project.
Enter a search string in the top field and a replace string in the bottom field.
Click to enable regular expressions. If you want to check the syntax of regular expressions, hover over and click the Show expressions help link.
When you search for a text string that contains special regex symbols, WebStorm automatically escapes them with backlash \ in the search field.
Keep in mind that if you copy (Ctrl+C) the string first and then paste (Ctrl+V) it in the search field, the regex symbols will not be taken into account.
However, when you specifically search for metacharacters such as .[{()\^$|?*+, you need to escape them with backslash \, so they can be recognized.
For example, if you need to find ., type \. in the search field.
WebStorm can also match a letter case when you enter a range of characters in your search field.
For example, if you want to search for only uppercase characters, type the following in the search field:
\b[A-Z]
To search and replace more complicated patterns, use the structural search and replace.
If is unselected in the search field, WebStorm searches for both lower and upper cases.
Select to match the case of the specified range.
When you browse the occurrences, WebStorm displays the replacement hints, so you can view the potential results before clicking the Replace button.

Use regex capturing groups and backreferences

You can put the regular expressions inside brackets in order to group them. Each group has a number starting with 1, so you can refer to (backreference) them in your replace pattern. Note that the group 0 refers to the entire regular expression. However, you can refer to the captured group not only by a number $n, but also by a name ${name}.

For example, for the numbered capturing groups, use the following syntax:

For the named capturing groups, use the following syntax:

Find and replace a captured group

Let's consider the following :

                gotoDetail(): void {
                    this.router.navigate(['/detail', this.selectedHero.id]);
                }
            

Open the search and replace pane Ctrl+R.
In the search field, enter parentheses () that would indicate a capturing group, for example: '([^']+)detail'.
In the replace field, backreference such groups by numbers starting with 1, for example: '$1details'
WebStorm highlights the found occurrences based on your search specifications and displays hints with the replace string.

Switch the character case

You can use regular expressions to change the case of characters that matches some criteria.

Open the search and replace pane Ctrl+R. Make sure that is selected in the search field.
In the search field enter the search pattern.
In the replace field, depending on what you want to achieve, enter one of the following syntax:
- \l changes a character to lowercase until the next character in the string.
  For example, Bar becomes bar.
- \u changes a character to uppercase until the next character in the string.
  For example, bar becomes Bar.
- \L changes characters to lowercase until the end of the literal string \E.
  For example, BAR becomes bar.
- \U changes characters to uppercase until the end of the literal string \E.
  For example, bar becomes BAR.

Last modified: 11 October 2024