使用 Thymeleaf 动态渲染 HTML 标签名称

本文介绍了如何使用 thymeleaf 动态生成 html 标签名称，例如根据模型属性动态生成 <h1> 到 <h6> 等标题标签。文章首先展示了一种使用 th:utext 的方法，但强调了其潜在的安全风险和可读性问题。随后，推荐使用 Thymeleaf 片段（Fragment）的方式来实现相同的功能，并提供了详细的代码示例和使用说明，以确保代码的安全性、可维护性和可读性。

在使用 Thymeleaf 开发 Web 应用时，有时需要根据数据模型的属性值来动态渲染 HTML 标签的名称。例如，根据文章的层级（level）来动态生成 <h1> 到 <h6> 标签。虽然 Thymeleaf 提供了强大的表达式功能，但直接动态生成标签名称需要一些技巧。

使用 th:utext 动态生成标签

一种方法是使用 th:utext 指令，它可以输出未转义的 HTML。 这种方法允许你通过字符串拼接的方式来构建 HTML 标签。

<th:block th:utext="|<h${model.level}>${model.title}</t${model.level}>|">

在这个例子中，${model.level} 和 ${model.title} 会被替换为实际的值，然后拼接成完整的 HTML 标签。

立即学习“前端免费学习笔记（深入）”；

注意事项：

• 安全性： 使用 th:utext 需要格外小心，因为它会直接将 HTML 插入到页面中。如果 ${model.title} 包含用户输入的内容，可能会导致跨站脚本攻击（xss）。 务必对用户输入进行适当的转义和验证。
• 可读性： 这种方法会降低模板的可读性，使代码难以维护。

因此，虽然 th:utext 可以实现动态生成标签名称的需求，但并不推荐在生产环境中使用，因为它存在安全风险和可读性问题。

使用 Thymeleaf 片段（Fragment）

更安全、更推荐的方法是使用 Thymeleaf 片段（Fragment）。片段允许你将一部分 HTML 代码定义为一个可重用的模块，然后在需要的地方引用它。

啵啵动漫

一键生成动漫视频，小白也能轻松做动漫。

116

查看详情

首先，创建一个包含所有可能的标题标签的片段：

<th:block th:fragment="title(level, title)">   <h1 th:text="${title}" th:if="${level == 1}"></h1>   <h2 th:text="${title}" th:if="${level == 2}"></h2>   <h3 th:text="${title}" th:if="${level == 3}"></h3>   <h4 th:text="${title}" th:if="${level == 4}"></h2>   <h5 th:text="${title}" th:if="${level == 5}"></h5>   <h6 th:text="${title}" th:if="${level == 6}"></h6> </th:block>

这个片段接受两个参数：level 和 title。 根据 level 的值，选择相应的标题标签并显示 title 的内容。

然后，在需要使用该片段的地方，使用 th:replace 指令来引用它，并传递相应的参数：

<th:block th:replace="index :: title(level=${model.level}, title=${model.title})" />

在这个例子中，index 是包含片段的模板的名称，title 是片段的名称。 ${model.level} 和 ${model.title} 会被传递给片段作为参数。

优点：

• 安全性： 使用片段可以避免直接操作 HTML 字符串，从而降低 XSS 攻击的风险。
• 可读性： 片段使模板更具可读性和可维护性。
• 可重用性： 片段可以在多个地方重复使用，提高代码的复用率。

总结

虽然可以使用 th:utext 动态生成 HTML 标签名称，但由于安全风险和可读性问题，不推荐使用。 更好的方法是使用 Thymeleaf 片段（Fragment），它可以提高代码的安全性、可读性和可维护性。 在实际开发中，应根据具体情况选择合适的方法。始终注意用户输入的安全性和代码的可读性。