结构化搜索与替换示例
如您所知,常规搜索与结构化搜索的主要区别在于,结构化搜索是在编程语言中查找结构模板。
结构化搜索的优势在于,您可以基于现有模板创建模式,从而在查找和替换代码时节省时间。
现有模板的广泛列表涵盖了从简单模式到更复杂模式的众多使用场景。
模式中的每一项由变量组成,变量两侧由 $ 符号限定。
方法调用
查找方法调用的最简单模板是 $Instance$.$MethodCall$($Arguments$)。

查找 工具窗口显示检测到的方法调用。

如果您需要查找具有特定参数数量的方法调用,请将光标放在 $Arguments$ 变量上,并为其配置 Count 筛选器。

查找 工具窗口中的搜索结果列表将被缩小。
要在源代码中定位方法调用,请在 查找 工具窗口中双击该项。 WebStorm 会在编辑器中打开对应文件,并将光标定位到该方法调用处。

带有检测到的方法调用的源代码也显示在 查找 工具窗口的右侧窗格中。
JavaScript 与 TypeScript 类
如果您有一个 JavaScript 或 TypeScript 类 MyClass:
则查找该类的最简单模板是 class $name$ {}。

接口的实现
如果您有一个 JavaScript 或 TypeScript 接口 MyInterface ,以及一个实现了该接口的类 Implementation:
则查找该实现的最简单模板是 class $Class$ implements $SomeInterface$ {}
子类
如果您有一个 JavaScript 或 TypeScript 类 Parent ,以及一个继承它的类 Descendant:
则查找 Descendant 的最简单模板是 class $Class$ extends $AnotherClass$ {}
语句
搜索 if 语句的最简单模板是 if($var$){$code$}
结果中检测到的匹配项将显示在 查找 工具窗口中,双击感兴趣的一项即可跳转到源代码。 WebStorm 会在编辑器中打开对应文件,并将光标定位到该语句处。

注释与字符串字面量
查找包含 SomethingWeWantToFind 的注释或字符串字面量的最简单模板为: $SomethingWeWantToFind$ 或 "$SomethingWeWantToFind$"。 若要查找包含特定词语(例如 SomethingWeWantToFind )的注释或字符串,需要将其指定为文本约束。

HTML 与 XML 示例
以下示例展示了如何在 HTML 与 XML 代码中使用结构化搜索。
搜索 XML 与 HTML 标签、属性及其值
搜索标签的最简单模板是 <$tag$/>。
通过对变量
$tag$添加约束,您可以指定要查找的标签。 例如,如果您指定script,将会找到所有script标签。
请参考以下用于在 XML 和 HTML 中搜索的模板:
<$tag$ $attribute$=$value$ />。 例如,如果您为变量$tag$指定文本筛选器script,为变量$attribute$指定src,列表将被缩小:
删除所有包含 id 属性大于 2 的行
创建一个 HTML 文件并粘贴以下代码:
<!doctype html> <html> <head> <title>Structural Search Example</title> <body> <ul> <li id="1">Example line 1</li> <li id="2">Example line 2</li> <li id="3">Example line 3</li> <li id="a">Example line a</li> <li id="5">Example line 5</li> </ul> </body> </html>在主菜单中,转到 。
在 语言(L) 列表中,选择 HTML。
将以下字符串粘贴到 搜索模板 字段中:
<$tag$ $attribute$="$value$">单击变量
$tag$。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
li。如果未显示筛选器面板,请单击
切换修饰符面板。

单击
$attribute$变量。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
id。单击
$value$变量。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
\d+。\d+正则表达式将搜索结果限制为数值。 因此,包含id="a"的行将被过滤掉。在不从筛选器面板移开焦点的情况下,单击 添加 按钮,选择 脚本 ,并粘贴以下代码:
value.getText().replaceAll (/"/, '').toInteger() > 2脚本读取
$value$变量的内容,并将其作为字符串返回(例如,"1")。 然后脚本会替换所有引号,将字符串值转换为整数并与2进行比较。
将 li 标签中 class 属性的大写值转换为小写
创建一个 HTML 文件,并粘贴以下代码:
<!doctype html> <html> <head> <title class="EXAMPLE">Structural Replace Example</title> <body> <ul> <li class="EXAMPLE">Example line 1</li> <li class="example">Example line 2</li> <li class="EXAMPLE">Example line 3</li> <li class="example">Example line a</li> <li id="EXAMPLE">Example line 5</li> </ul> </body> </html>在主菜单中,转到 。
从 语言(L) 列表中选择 HTML。
将以下字符串粘贴到 搜索模板 字段中:
<$tag$ $attribute$="$value$">选中 区分大小写(C) 复选框。
单击
$tag$变量。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
li。单击
$attribute$变量。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
class。单击
$value$变量。在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入
[A-Z].*。[A-Z].*正则表达式将搜索结果限制为大写值。从 目标(T) 列表中选择 值。 此操作会高亮显示
class属性的所有大写值。在 替换模板 字段中粘贴
$to_lower_case$变量。单击
$to_lower_case$变量。在筛选器面板中,单击 添加修饰符 ,选择 脚本 并粘贴以下代码:
value.getText().toLowerCase()
单击 查找。
在 查找 工具窗口中预览搜索结果,并单击 全部替换(A)。
