当构建HTML时，如何在JavaScript中正确支持撇号？

Question

我有以下代码：

var name = "Joe O'Neal";

var row= [];
row.push(
  "<td><input type='hidden' name='milestones[" + id + "].Name' 
   value='" + name + "' class='currentRowName'  />
    <span class='currentRowNameText'>" + name + "</span></td>")

但问题是，我的情况是变量名中有一个撇号，所以它会导致以下问题：

  value='" + name + "'

如何正确地编写以避免任何撇号冲突？在C#中，我会做类似的事情

  value=\"" + name + "\"

但在JavaScript中似乎不起作用。

- leora

---

我不认为有一种正确的方法...但我更喜欢使用 ' 表示字符串字面量，如 '<div class="value">dd</div>'。 - Arun P Johny

@Arun P Johny- 我不明白你在建议什么 - leora

你需要对输入进行过滤。你需要一种方法来用HTML实体替换单引号。有很多种方法可以做到这一点。这个问题有几个答案：https://dev59.com/ynVD5IYBdhLWcg3wTJvF - Kyle Falconer

如果你知道你只会得到单引号而不是双引号，你可以交换引号：...value="' + name + '"... 但这只是一个临时解决方案。 - Zack Newsham

@Kyle - 如果你将这个转换为答案，我会接受。 - leora

@KyleFalconer，但是那里的许多答案都没有涵盖OP想要安全处理撇号的情况。 - RobG

Answer 1

你想要做的是清理输入内容。为此，你可以定义一个帮助方法，用Unicode等效或HTML实体替换任何不安全的字符。这种方式不仅用于转义引号，还可以帮助防止像XSS攻击这样的问题。

短期解决方案

以下内容改编自Tom Gruner在另一个问题中的答案，该问题是关于使用jQuery转义HTML字符串的。

var entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
        return entityMap[s];
    });
}

然后使用它，您可以执行以下操作：

var name = "Joe O'Neal";
var safe_name = escapeHtml(name);

var row= [];
row.push(
    "<td><input type='hidden' name='milestones[" + id + "].Name' 
    value='" + safe_name + "' class='currentRowName'  />
    <span class='currentRowNameText'>" + safe_name + "</span></td>");

长期解决方案

如果你经常这样做，那么现在可能是时候开始使用一个可以自动完成此操作的模板库了。我推荐并且觉得有用的一个模板库是Google Closure Templates。它是一个企业级的模板库，会（默认情况下）对你的HTML进行消毒处理。

关于Closure Templates如何帮助保护你的更多信息，你可以查看他们在security上的页面。

- Kyle Falconer

Answer 2

你可以引用字符：

var apostophe = '\''

或者，如果打算在HTML文档中使用，请使用HTML实体：

var apostrophe = ''';
var apostrophe = ''';

或者使用Unicode：

var apostrophe = '\u0027';

那么您可以执行以下操作：

var name = 'O\u0027Neal';
el.innerHTML = '<input value="' + name + '">';

使用正则表达式和replace函数将字符映射到上述实体或Unicode值相对简单。

- RobG

---

同时值得一提的是，您可以使用DOM对象和createElement来组合HTML元素，而不是使用字符串。 - tadman