WebStorm 2023.2 Help

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.

  1. Press Control+R to open the search and replace pane.

  2. Enter a search string in the top field and a replace string in the bottom field.

    Regex search and replace fields

    Click the Regex icon to enable regular expressions. If you want to check the syntax of regular expressions, hover over the Regex icon and click the Show expressions help link.

  3. When you search for a text string that contains special regex symbols, WebStorm automatically escapes them with backlash \ in the search field.

    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.

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

  5. If the Match Case icon is unselected in the search field, WebStorm searches for both lower and upper cases.

    The result of search with Match Case off

    Select the Match Case icon to match the case of the specified range.

    The result of the Match Case selection

  6. When you browse the occurrences, WebStorm displays the replacement hints, so you can view the potential results before clicking the Replace button.

    Replacement hints

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:

Numbered regex capturing group

For the named capturing groups, use the following syntax:

Named regex capturing group

Find and replace a captured group

Let's consider the following code:

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

  1. Open the search and replace pane Control+R.

  2. In the search field, enter parentheses () that would indicate a capturing group, for example: '([^']+)detail'.

  3. In the replace field, backreference such groups by numbers starting with 1, for example: '$1details'

  4. WebStorm highlights the found occurrences based on your search specifications and displays hints with the replace string.

    Replace with regex result

Switch the character case

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

  1. Open the search and replace pane Control+R. Make sure that the Regex icon is selected in the search field.

  2. In the search field enter the search pattern.

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

    Switch to the uppercase character example
Last modified: 11 September 2023
Search for a target within a project Regular expression syntax reference