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.
Using Search for a target structurally
From the main menu, select to open the Structural Search dialog.
In the Structural Search dialog, do one of the following:
Create your own template from scratch.
In the editor area, enter the code pattern (
$variable$that represent 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.In the list of existing templates,
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.
The Structural Search dialog displays the selected template and values of the filters used in the template. You can edit the existing filters or add new conditions, for example, add some regular expressions, or a script constraint. Place the caret at the code variable and use the filter area to manage filters.
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.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 ).
Click Find.
WebStorm displays the results in the Find tool window.
To find and replace source code structurally
From the main menu, choose , or .
In the dialog that opens, define the search template.
In case of the structural replace, specify the replacement pattern, and define variable constraints as required.
Specify the search and replace options, in particular, the number of occurrences to be matched, and the type of files to be analyzed.
Specify the scope to perform the structural search and replace in. To do that, click the down arrow in the Scope list, and select one of the pre-defined scopes, or click the ellipsis button, and configure the desired scope in the Scopes dialog.
Click Find. The detected occurrences are displayed in the Find tool window.
Note that in case of replacement, you can select the desired matches in the search results and click the Preview Replacement button. The corresponding occurrence is highlighted in the source code.
Share search templates
You can share a search template with your peers by exporting or importing it.
In the Structural Search dialog ( ), create a new search template or use the existing one.
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.