WebStorm 2025.2 Help

结构化搜索与替换示例

如您所知,常规搜索与结构化搜索的主要区别在于,结构化搜索是在编程语言中查找结构模板。

结构化搜索的优势在于,您可以基于现有模板创建模式,从而在查找和替换代码时节省时间。

现有模板的广泛列表涵盖了从简单模式到更复杂模式的众多使用场景。

模式中的每一项由变量组成,变量两侧由 $ 符号限定。

方法调用

查找方法调用的最简单模板是 $Instance$.$MethodCall$($Arguments$)

方法调用的搜索模板

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

在“查找”工具窗口中的搜索结果

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

带计数筛选器的方法调用搜索模板

查找 工具窗口中的搜索结果列表将被缩小。

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

结构化搜索:跳转到源码

带有检测到的方法调用的源代码也显示在 查找 工具窗口的右侧窗格中。

JavaScript 与 TypeScript 类

如果您有一个 JavaScript 或 TypeScript 类 MyClass

class MyClass {}

则查找该类的最简单模板是 class $name$ {}

类的结构化搜索

接口的实现

如果您有一个 JavaScript 或 TypeScript 接口 MyInterface ,以及一个实现了该接口的类 Implementation

class Implementation implements MyInterface{}

则查找该实现的最简单模板是 class $Class$ implements $SomeInterface$ {}

子类

如果您有一个 JavaScript 或 TypeScript 类 Parent ,以及一个继承它的类 Descendant

class Descendant extends Parent{}

则查找 Descendant 的最简单模板是 class $Class$ extends $AnotherClass$ {}

语句

搜索 if 语句的最简单模板是 if($var$){$code$}

结果中检测到的匹配项将显示在 查找 工具窗口中,双击感兴趣的一项即可跳转到源代码。 WebStorm 会在编辑器中打开对应文件,并将光标定位到该语句处。

结构化搜索 if 语句

注释与字符串字面量

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

搜索字符串字面量

HTML 与 XML 示例

以下示例展示了如何在 HTML 与 XML 代码中使用结构化搜索。

搜索 XML 与 HTML 标签、属性及其值

搜索标签的最简单模板是 <$tag$/>

  1. 通过对变量 $tag$ 添加约束,您可以指定要查找的标签。 例如,如果您指定 script ,将会找到所有 script 标签。

    搜索 script 标签
  2. 请参考以下用于在 XML 和 HTML 中搜索的模板: <$tag$ $attribute$=$value$ />。 例如,如果您为变量 $tag$ 指定文本筛选器 script ,为变量 $attribute$ 指定 src ,列表将被缩小:

    查找包含 src 属性的 script 标签

删除所有包含 id 属性大于 2 的行

  1. 创建一个 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>
  2. 在主菜单中,转到 编辑 | 查找 | 结构化查找

  3. 语言(L) 列表中,选择 HTML

  4. 将以下字符串粘贴到 搜索模板 字段中:

    <$tag$ $attribute$="$value$">
  5. 单击变量 $tag$

  6. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 li

    如果未显示筛选器面板,请单击 切换修饰符面板

    切换筛选器面板
  7. 单击 $attribute$ 变量。

  8. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 id

  9. 单击 $value$ 变量。

  10. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 \d+

    \d+ 正则表达式将搜索结果限制为数值。 因此,包含 id="a" 的行将被过滤掉。

  11. 在不从筛选器面板移开焦点的情况下,单击 添加 按钮,选择 脚本 ,并粘贴以下代码:

    value.getText().replaceAll (/"/, '').toInteger() > 2

    脚本读取 $value$ 变量的内容,并将其作为字符串返回(例如, "1")。 然后脚本会替换所有引号,将字符串值转换为整数并与 2 进行比较。

    删除 id 大于 2 的行

将 li 标签中 class 属性的大写值转换为小写

  1. 创建一个 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>
  2. 在主菜单中,转到 编辑 | 查找 | 结构化替换

  3. 语言(L) 列表中选择 HTML

  4. 将以下字符串粘贴到 搜索模板 字段中:

    <$tag$ $attribute$="$value$">
  5. 选中 区分大小写(C) 复选框。

  6. 单击 $tag$ 变量。

  7. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 li

  8. 单击 $attribute$ 变量。

  9. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 class

  10. 单击 $value$ 变量。

  11. 在筛选器面板中,单击 添加修饰符 ,选择 文本 ,然后在值字段中输入 [A-Z].*

    [A-Z].* 正则表达式将搜索结果限制为大写值。

  12. 目标(T) 列表中选择 。 此操作会高亮显示 class 属性的所有大写值。

  13. 替换模板 字段中粘贴 $to_lower_case$ 变量。

  14. 单击 $to_lower_case$ 变量。

  15. 在筛选器面板中,单击 添加修饰符 ,选择 脚本 并粘贴以下代码:

    value.getText().toLowerCase()
    结构化替换目标
  16. 单击 查找

  17. 查找 工具窗口中预览搜索结果,并单击 全部替换(A)

    结构化替换:全部替换
最后修改日期: 2025年 9月 26日