WebStorm 2021.3 Help

Structural search and replace

A conventional search process does not take into account the syntax and semantics of the source code. Even if you use regular expressions, WebStorm still treats your code as a regular text. The structural search and replace (SSR) actions let you search for a particular code pattern or grammatical construct in your code considering your code structure.

WebStorm finds and replaces fragments of source code, based on the search templates that you create and conditions you apply.

Search for a target structurally

  1. From the main menu, select Edit | Find | Search Structurally to open the Structural Search dialog.

    Structural Search dialog
  2. In the Structural Search dialog, do one of the following:

    • Create your own template from scratch.

      In the editor area, enter the code template ($variable$ that represents your code), click the Settings button, and select Save Template to save it for future use.

      Structural Search dialog: save template

      WebStorm adds the created template to the existing template list (User Defined node) in the Existing Templates dialog.

    • Use one of the existing templates to act as a prototype.

      Click the Settings button, select Existing Templates to open the list of predefined templates, and select the appropriate one.

      Open the list of existing templates

      Consider the following example class:

      class Person { constructor(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.eyeColor = eyeColor; this.age = age; } move(distanceInMeters) { console.log(`Person moved ${distanceInMeters}m.`); } sing(a) { console.log(`Person sings ${a}`); } jump (distanceInMeters,heightInMeters) { console.log(`Person jumped ${heightInMeters}m high and ${distanceInMeters}m right.`); } RETIRED(age) { return age >= 60; } }

      Let's find a certain method in the class.

      In the list of existing templates, click Javascript, expand the General node, and select the Functions template.

      the Existing Templates dialog

      Click OK to return to the Structural Search dialog to work with the selected template.

      WebStorm instantly highlights the found code occurrences in the editor.

      Found occurrences highlighted
  3. The Structural Search dialog displays the selected template and the values of the filters used in the template. You can edit the existing filters or add new conditions. Place the caret at the code variable and use the filter area to manage filters.

    For example, to change the number of parameters in the template, select the $parameter$ variable and specify the appropriate minimum number of them.

    the Edit filters popup

    When you click Find, WebStorm opens the Find tool window with a list of methods with two and more parameters, in our example, only jump (distanceInMeters,heightInMeters) {} is shown.

    Structural Search: results
  4. In the filter area, click the Add button to add a new condition. If, for example, you need to add a regular expression, select Text. You can also add other conditions depending on your variable.

  5. In the field that opens, type your condition.

    For example, let's type the following regular expression:

    Add regular expression to the filter dialog

    In this case WebStorm will only search for the fields with uppercase characters.

    Also note that by default, the Recursive checkbox is selected. That means that WebStorm performs the recursive search and all nested items will be included in the results. For example, when you search for a method call, with the Recursive option enabled, WebStorm will find nested method calls in foo(foo(foo())). With the Recursive option disabled, only the outer method call will be found.

  6. Specify the following options to further narrow the search:

    • File type - use the list to select, which file types should be a part of the search. In our case, it is JavaScript.

    • Scope - specify where to search: in a project, module, directory, or within a custom scope.

    • Search target - you can select Complete match to match the exact template or other available code elements (in our case it is name).

      Search target
  7. Click Find.

WebStorm displays the results in the Find tool window.

Find tool window results

Replace a target structurally

  1. From the main menu, select Edit | Find | Replace Structurally.

  2. In the Replace Structurally dialog, add new or existing templates to the search and replace template areas. You can save the replace template the same way as the search one.

  3. If you need to add a filter for the variable in the replace template, place a caret at the variable of interest and use the filter area to manage filters.

  4. In the filter area, depending on what you chose as a filter, specify the condition.

    Structural Replace: specify condition
  5. To narrow down your replace results, select the following options:

    • Shorten fully-qualified names - replaces fully qualified class names with short names and imports.

    • Reformat - automatically formats the replaced code.

    • Use static import - uses static import in replacement when possible.

    After specifying the necessary options, click Find. WebStorm displays the results in the Find tool window.

  6. In the Find tool window, you can work with the results further, replacing found items one by one, or all of them at once, or previewing your potential changes.

Share search templates

You can share a search template with your peers by exporting or importing it.

  1. In the Structural Search dialog (Edit | Find | Search Structurally), create a new search template or use the existing one.

  2. To export a template, click the Settings button and select Export Template to Clipboard. WebStorm adds the XML representation of the template to a clipboard (press Ctrl+Shift+V to see the clipboard's content). You can share this representation with other developers in chat, email, or a forum.

    To import a template, copy (Ctrl+C) the shared XML code from anywhere (email, chat, or a forum) and in the Structural Search dialog, click the Settings button and select Import Template from Clipboard. WebStorm takes the XML code representation and converts it into a template including variables and a scope if it is present.

Last modified: 17 November 2021