如何在Thymeleaf中展示包含带引号内联样式的HTML内容

你碰到的这个错误完全是因为内联样式里的双引号嵌套冲突导致的——你的HTML字符串里，font-family属性值用了双引号包裹字体名称（比如"Segoe UI"），而Thymeleaf解析时会把整个HTML字符串的双引号当作边界，这样内部的双引号就会被误判为字符串结束，从而抛出语法错误。

这里有几个可行的解决办法：

方法1：转义HTML中的双引号 #

把样式里的双引号替换成HTML实体"，这样Thymeleaf就能正确识别它们为内容的一部分，而不是语法符号。

修改后的完整HTML应该是这样：

<p><span style="color: rgba(0,0,0,0.85);background-color: rgb(255,255,255);font-size: 14px;font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;">This is my styled text.</span>&nbsp;</p>

之后再用th:utext="${myVariable}"渲染就不会报错了。

方法2：用单引号替换样式内的双引号 #

如果是后端生成这段HTML，直接把字体名称的双引号换成单引号，这样就不会和外层样式的双引号冲突：

<p><span style="color: rgba(0,0,0,0.85);background-color: rgb(255,255,255);font-size: 14px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">This is my styled text.</span>&nbsp;</p>

CSS允许用单引号包裹属性值，所以这种方法完全符合规范，也能解决解析问题。

方法3：后端提前转义HTML字符串 #

如果你的HTML是在后端动态生成的，可以用工具类自动转义特殊字符。比如Java环境下，使用Apache Commons Text的StringEscapeUtils来转义HTML：

import org.apache.commons.text.StringEscapeUtils;

// 原始未转义的HTML字符串
String originalHtml = "<p><span style=\"color: rgba(0,0,0,0.85);background-color: rgb(255,255,255);font-size: 14px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji;\">This is my styled text.</span>&nbsp;</p>";
// 转义HTML中的特殊字符
String escapedHtml = StringEscapeUtils.escapeHtml4(originalHtml);
// 将转义后的字符串传入Thymeleaf模型
model.addAttribute("myVariable", escapedHtml);

这样模板里直接用th:utext渲染转义后的字符串即可。

另外提个小细节：你原始HTML里的rgb (255,255,255)多了个空格，虽然不是报错原因，但建议改成rgb(255,255,255)，符合CSS的语法规范。

内容的提问来源于stack exchange，提问作者Osama A.Rehman