时间戳

首页 > 解决方案 > 如何使用 Intellij 的结构替换将 Bootstrap 4 单选按钮重构为 Bootstrap 5

intellij-idea - 如何使用 Intellij 的结构替换将 Bootstrap 4 单选按钮重构为 Bootstrap 5

问题描述

我正在尝试将一些 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 重叠（带有“查找选项...”链接的那个）

[想知道把这个带到 Jetbrains bug-tracker...]

在此处输入图像描述

模板是：

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

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

标签： intellij-ideastructural-search

解决方案

您似乎遇到了一个错误，无法匹配 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>

推荐阅读