Structural search and replace

Search for a target structurally

1. From the main menu, select Edit | Find | Search Structurally to open the 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 , and select Save Template to save it for future use.

     

     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 , select Existing Templates to open the list of predefined templates, and select the appropriate one.

     

     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.

     

     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.

     

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.

   

   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.

   

4. In the filter area, click 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:

   \b[A-Z]+\b

   

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

     

7. Click Find.

WebStorm displays the results in the Find tool window.

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.

   

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