如何在动态创建的HTML标签内容中转义单引号

Question

在我的JavaScript代码中，我有一个变量包含一个字符串。该字符串中包含 ' 或 " 符号。例如：

var name= "hi's";

我正在代码中动态创建一个链接。其中字符串content将被动态使用以在HTML页面上创建链接。

content= '<a onclick="javascript:fun(\'' + name + '\');">'

这里的问题在于变量 name 中的引号完整地包含了内容字符串。因此，后续的内容部分无法被识别。

如果变量中包含双引号，例如 var name = 'hi"s';，同样会出现类似的问题。

请帮忙解决这个问题。

- star

---

问题已解决！请勿使用内联代码。 - gdoron

你在代码中后面如何使用 content？此外，没有 href 属性的链接不是一个好的做法。 - Ja͢ck

@Jack：在页面的onload事件中，我正在将此内容附加到一个div中。 - star

@Dolly 那么 ' 将会在字符串中被转换为 %27。这对此处没有帮助。 - t.niese

Answer 1

这是如何正确创建锚点并完全避免需要转义任何内容的方法。

var name = "Hi's",
anchor = document.createElement('a');

// should have an href
// links will be displayed differently by some browsers without it
anchor.href = '#';
// using onclick for pragmatic reasons
anchor.onclick = function() {
    fun(name);
    return false;
}
anchor.innerHTML = 'hello world';

// later
mydiv.appendChild(anchor);

顺便说一下，onclick属性根本不应该以"javascript:"开头；这已经是被隐含了的。

更新

如果您仍然对内联版本感兴趣，则变量需要两个步骤的编码：

1. 第一步是正确序列化变量；我会使用JSON.stringify()来实现 2. 第二步是HTML编码，最简单的形式是只需将双引号替换为其正确的编码值即可。

例如：

var content = '<a href="#" onclick="fun(' + 
    JSON.serialize(name).replace(/"/g, '&quot;') + ');">hello</a>';

- Ja͢ck