Velocity模板生成多行文本存入JS变量报错的解决方式咨询

核心结论 #

优先在后端Java中处理，前端无法有效规避这个语法错误——因为Velocity渲染出的JavaScript代码本身存在语法问题，浏览器在解析阶段就会报错，根本轮不到前端JS代码执行处理逻辑。

原因分析 #

JavaScript的单引号/双引号字符串不允许直接包含未转义的换行符。当Velocity渲染多行文本时，会直接把换行符输出到JS代码中，导致生成的代码结构被打断：

// 错误的渲染结果
const text = {
  'key2': 'value in first line
value in second line.'
}

这种代码会直接触发Uncaught SyntaxError，浏览器根本不会执行后续的JS逻辑，前端没有机会做修复处理。

而直接渲染到HTML中没问题，是因为HTML对换行符的兼容性更好——浏览器会自动将换行解析为空白字符，不会破坏HTML的语法结构。

后端处理方案 #

在Java层对资源文本做转义处理，重点转义换行符和单引号：

// 处理资源值的示例代码
String processedValue = resource.getValue()
    .replace("'", "\\'") // 转义单引号，避免提前闭合JS字符串
    .replace("\n", "\\n") // 将换行符转为JS可识别的转义序列
    .replace("\r", "\\r"); // 可选：处理回车符，适配不同系统的换行格式

之后Velocity模板中的代码可以简化为：

<script>
const text = {
#foreach($resource in ${messages.getResourcesWithPrefix('path.to.keys')})
  '$!{resource.getKey()}': '$!{resource.getValue()}',
#end
}
</script>

渲染后的JS代码会变成合法的格式：

const text = {
  'key2': 'value in first line\nvalue in second line.'
}

前端的局限性尝试（不推荐） #

如果硬要尝试前端处理，只能通过将文本先渲染到HTML隐藏元素中，再通过JS读取元素内容。但这种方案绕弯子，还可能引入额外的DOM操作开销，不如后端直接处理靠谱：

<!-- 先渲染到隐藏DOM -->
<div id="text-resources" style="display: none;">
#foreach($resource in ${messages.getResourcesWithPrefix('path.to.keys')})
  <div data-key="$!{resource.getKey()}">$!{resource.getValue().replace(&quot;'&quot;, &quot;&quot;)}</div>
#end
</div>

<script>
// 从DOM读取并构建对象
const text = {};
document.querySelectorAll('#text-resources [data-key]').forEach(el => {
  text[el.dataset.key] = el.textContent;
});
</script>

内容的提问来源于stack exchange，提问作者Nikola Pavicevic