如何将动态 html 安全地嵌入到动态 javascript 文件中，这样就不会破坏 javascript

Question

我需要动态构建一个 javascript 文件并在其中嵌入一些 html，以便在运行时，javascript 能够将 html 添加到 DOM。

我有一个 javascript.js，可以使用 wicket 进行插值。它包含：

var html = "${somehtml}"

document.write(html);

目前，如果我将 ${somehtml} 替换为包含单引号的 html，显然会破坏 html。

我尝试使用 URLEncoder.encode() 和 javascript unescape() 但这破坏了 javascript。

我想知道是否可以对 Base64 进行编码/解码？或者还有其他解决方案吗？

Answer 1

首先将每个反斜杠替换为两个反斜杠，然后将每个引号替换为一个反斜杠和一个引号。像这样的东西

var newstring = mystring.replace(/\\/g, "\\\\").replace(/"/g, '\\"');

Answer 2

Apache Commons 提供了一个名为 StringEscapeUtils< 的帮助程序类/a>.它可以对字符串进行编码，以便它们可以安全地嵌入到 javascript (ecmascript) 中。

Answer 3

我怀疑这就是您正在寻找的，因为您正在动态构建 js，但嵌入式 javascript 文件 (*.ejs) 允许您从外部文件加载标记（可以选择传递自定义数据也是），而不是将所有内容都放在引号中并且看起来通常很混乱。

它至少对开发有用，但我不想向客户端发送更多文件。

http://embeddedjs.com/

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

与

someVar += "<ul>";
for(var i=0; i<supplies.length; i++) {
    someVar += "<li>" + supplies[i] + "</li>";
}
someVar += "</ul>";