如何使用 Intellij Structural Replace 将 Bootstrap 4 单选按钮重构为 Bootstrap 5

Question

我正在尝试将一些 Java Server Pages/Spring Webflow 视图从 Twitter Bootstrap 4 更新到 Bootstrap 5。

我有很多单选按钮，并且必需的 HTML 样板已经从 v4 到 v5 发生了很大变化。这似乎是 IntelliJ 的“结构替换”的一个很好的用例，但我无法让它工作。

这是我正在尝试的：

我最终得到：

我尝试向变量添加过滤器，即：

我已经尝试更改“搜索目标”（以标记 [例如]）...

这些都不起作用。

我发现 Jetbrains（通常很好）的 doco 对这个功能很糟糕。

[编辑...示例代码]

   <div class="row mt-2">
        <div class="col-4">
            <div class="form-check">
                <label class="custom-control custom-radio">
                    <form:radiobutton path="type" value="wdpp" cssClass="custom-control-input"/>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Wires: Pole to Pole</span>
                </label>
            </div>
            <div class="form-check">
                <label class="custom-control custom-radio">
                    <form:radiobutton path="type" value="wdpb" cssClass="custom-control-input"/>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Wires: Pole to Building</span>
                </label>
            </div>
            <div class="form-check">
                <label class="custom-control custom-radio">
                    <form:radiobutton path="type" value="transformer" cssClass="custom-control-input"/>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Transformer</span>
                </label>
            </div>
            <div class="form-check">
                <label class="custom-control custom-radio">
                    <form:radiobutton path="type" value="meterBox" cssClass="custom-control-input"/>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Meter Box</span>
                </label>
            </div>
            <div class="form-check">
                <label class="custom-control custom-radio">
                    <form:radiobutton path="type" value="pole" cssClass="custom-control-input"/>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Pole</span>
                </label>
            </div>
            [...more radios elided...]
        </div>
    </div>

[编辑...有时会出现不同的用户界面]

实际上，我认为这个 UI 总是会出现，然后很快就会与之前的 UI（带有“Find Options...”链接的那个）重叠

[想知道是否将其带到 Jetbrains 错误跟踪器...]

模板是：

<replaceConfiguration name="Unnamed" text="&lt;label class=&quot;custom-control custom-radio&quot;&gt;&#10;    &lt;form:radiobutton path=&quot;$path$&quot; value=&quot;$value$&quot; cssClass=&quot;custom-control-input&quot;/&gt;&#10;    &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;&#10;    &lt;span class=&quot;custom-control-description&quot;&gt;$label$&lt;/span&gt;&#10;&lt;/label&gt;" recursive="false" type="XML" dialect="HTML" search_injected="false" reformatAccordingToStyle="false" shortenFQN="false" replacement="&lt;form:radiobutton id=&quot;$path$-$value$&quot; path=&quot;$path$&quot; value=&quot;$value$&quot; cssClass=&quot;form-check-input&quot;/&gt;&#10;&lt;label class=&quot;form-check-label&quot; for=&quot;$path$-$value$&quot;&gt;$label$&lt;/label&gt;">
  <constraint name="__context__" within="" contains="" />
  <constraint name="path" within="" contains="" />
  <constraint name="value" within="" contains="" />
  <constraint name="label" within="" contains="" />
</replaceConfiguration>

感激地收到任何想法/建议/指点。

Answer 1

您似乎遇到了一个错误，无法匹配 HTML 标记中的 JSP 标记。也许您可以使用以下两步解决方法。先把JSP标签换成假的HTML标签：

<replaceConfiguration name="Unnamed" text="&lt;form:radiobutton path=&quot;$type$&quot; value=&quot;$transformer$&quot; cssClass=&quot;custom-control-input&quot;/&gt;" recursive="false" type="Qt UI file" dialect="JSP" reformatAccordingToStyle="false" shortenFQN="false" replacement="&lt;form-radiobutton path=&quot;$type$&quot; value=&quot;$transformer$&quot; cssClass=&quot;custom-control-input&quot;/&gt;">
  <constraint name="__context__" within="" contains="" />
  <constraint name="type" within="" contains="" />
  <constraint name="transformer" within="" contains="" />
</replaceConfiguration>

然后用新结构执行 HTML 替换：

<replaceConfiguration name="Unnamed" text="&lt;label class=&quot;custom-control custom-radio&quot;&gt;&#10;    &lt;form-radiobutton path=&quot;$path$&quot; value=&quot;$value$&quot; cssClass=&quot;custom-control-input&quot;/&gt;&#10;    &lt;span class=&quot;custom-control-indicator&quot;&gt;&lt;/span&gt;&#10;    &lt;span class=&quot;custom-control-description&quot;&gt;$label$&lt;/span&gt;&#10;&lt;/label&gt;" recursive="false" type="HTML" reformatAccordingToStyle="false" shortenFQN="false" replacement="&lt;form:radiobutton id=&quot;$path$-$value$&quot; path=&quot;$path$&quot; value=&quot;$value$&quot; cssClass=&quot;form-check-input&quot;/&gt;&#10;&lt;label class=&quot;form-check-label&quot; for=&quot;$path$-$value$&quot;&gt;$label$&lt;/label&gt;">
  <constraint name="__context__" within="" contains="" />
  <constraint name="path" within="" contains="" />
  <constraint name="value" within="" contains="" />
  <constraint name="label" within="" contains="" />
</replaceConfiguration>