如何删除 Thymeleaf 条件代码块中的标签跨度、空格、换行符？答案

【问题标题】：How to remove tag span, space, new line character in Thymeleaf conditional code block?如何删除 Thymeleaf 条件代码块中的标签跨度、空格、换行符？
【发布时间】：2019-10-23 16:33:30
【问题描述】：

我正在使用 Spring Boot 2.1.5.RELEASE、Thymeleaf 3.0.11.RELEASE (thymeleaf-3.0.11.RELEASE.jar)、Thymeleaf Spring 3.0.11.RELEASE (thymeleaf-spring5-3.0.11.RELEASE.罐子）

代码sn-p

<tr th:each="employee : ${employeeList}">
    <td th:text="${employee.order}"></td>
    <td th:text="${employee.age}"></td>
    <td th:switch="${employee.level}">
        <span th:case="0">Junior</span>
        <span th:case="1">Senior</span>
        <span th:case="2">Expert</span>
    </td>
    <td th:text="${employee.activeStatus}"></td>
</tr>

为了通过 JavaScript 在数据网格中排序，我需要删除 <span></span> 标记对。例如，如果员工的级别 = 2。这一次，Thymeleaf 将呈现

<td><span>Expert<span></td>

我希望它变成

<td>Expert</td>

（没有<span> 标签）。这个怎么办？

我也试试

<tr th:each="employee : ${employeeList}">
    <td th:text="${employee.order}"></td>
    <td th:text="${employee.age}"></td>
    <td th:switch="${employee.level}">
        <th:block th:case="'0'">Junior</th:block>
        <th:block th:case="'1'">Senior</th:block>
        <th:block th:case="'2'">Expert</th:block>
    </td>
    <td th:text="${employee.activeStatus}"></td>
</tr>

但它会产生不需要的字符

<td>


Expert
</td>

（文本前有换行或空格，不是想要的结果）

【问题讨论】：

标签： spring spring-boot thymeleaf

【解决方案1】：

答案是，您不应该关心额外的空格和换行符。 HTML 在呈现时会忽略这些空格，因此这对您来说并不重要——而且除了格式化黑客之外，没有办法摆脱它们。

如果你真的想摆脱空格，你可以：

把开关放在一条线上。

<tr th:each="employee : ${employeeList}">
    <td th:text="${employee.order}"></td>
    <td th:text="${employee.age}"></td>
    <td th:switch="${employee.level}"><th:block th:case="'0'">Junior</th:block><th:block th:case="'1'">Senior</th:block><th:block th:case="'2'">Expert</th:block></td>
    <td th:text="${employee.activeStatus}"></td>
</tr>

创建一个Map<String, String> levelToDescription，将其放在模型上，然后使用它代替 switch 语句。

<tr th:each="employee : ${employeeList}">
    <td th:text="${employee.order}" />
    <td th:text="${employee.age}" />
    <td th:text="${levelToDescription[employee.level]}" />
    <td th:text="${employee.activeStatus}" />
</tr>

等等……

【讨论】：

【解决方案2】：

替换

<td th:switch="${employee.level}">
    <th:block th:case="'0'">Junior</th:block>
    <th:block th:case="'1'">Senior</th:block>
    <th:block th:case="'2'">Expert</th:block>
</td>

通过

<th:block th:if="${employee.level} eq '0'"><td>Junior</td></th:block>
<th:block th:if="${employee.level} eq '1'"><td>Senior</td></th:block>
<th:block th:if="${employee.level} eq '2'"><td>Expert</td></th:block>

【讨论】：