从属性文件取得一段消息,交给 jQuery 对话框后,里面的 br 没有换行。这类问题不一定发生在对话框本身:消息可能在读取、传输或渲染时经过转义。
三种内容看起来相近,含义却不同
<br> HTML 标签字符
<br> HTML 实体形式的文本
第一行\n第二行 这里的 \n 可能是换行,也可能仍是两个字符
HTML 标签只有在按 HTML 解释时才会形成元素;纯文本入口会把它作为字符显示。属性文件语法、JSON 编码和 JavaScript 字符串各有自己的转义规则,不能仅凭编辑器里的样子判断最终值。
排查时可查看属性文件原值、接口响应、JavaScript 的实际字符串以及最终 DOM。对同一字符串查看 JSON.stringify 的结果,有助于区分实际换行和字面的反斜杠加 n。
只需要多行文本时,不必注入 HTML
如果消息本来就是纯文本,可以使用真实换行,并通过 white-space 保留:
<div id="message" class="message"></div>
.message {
white-space: pre-line;
}
var message = '第一行\n第二行';
$('#message').text(message);
这个例子只演示消息节点的渲染,具体对话框仍需使用其支持的内容容器 API。jQuery 的 .text() 设置文本,不会把消息里的标记当作 HTML 执行。jQuery .text() 文档
pre-line 保留换行,但会合并普通空白;如果还要保留连续空格,应评估 pre-wrap 等适合的展示规则。
不要统一解码后交给 HTML 入口
如果消息真的约定为 HTML,应明确哪些标记被允许,并在正确的信任边界做清理。把任意消息反复实体解码再交给 .html(),可能把原本只是文本的外部输入变为可执行标记。
这次旧项目没有保留下完整渲染链路,因此不能确定编码发生在哪一层。可复用的处理思路是先分清内容类型,再选择相应入口,而不是为了换行关闭安全转义。