Question

我有以下javascript：

tr.append("<a href='add_widget.html?id=" + data[i].id + "&pg=" + data[i].page_number + "&dest=" + data[i].dest + "&name=" + data[i].name.replace("'","\\'") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");

有问题的代码与名称字段有关。当我点击上面的javascript创建的超链接时，如果我有一个名为“John Doe”的名称，则新页面的查询字符串具有全名。但是，如果我尝试传递像“John's stuff”这样的名称，上面的逻辑会创建一个如下所示的查询字符串变量：

&name=John\

如何更改上面的代码，以便将整个字符串“John's stuff”传递给add_widget.html页面？

感谢。

Answer 1

替换（ “'”， “％27”）

尝试http://meyerweb.com/eric/tools/dencoder/这是一个在线网址编码器/解码器。

Answer 2

当你试图“保护”角色时，你必须记住你正在保护它们的内容。在这种情况下，您需要担心两个解释器：

您正在构建HTML，因此您必须担心HTML解析器;
您正在构建网址，因此您必须担心浏览器和服务器将如何解析网址。

要处理第一个问题，您可以使用等效的HTML实体（'）替换引号。要处理第二个问题，您可以使用encodeURIComponent()。

我认为您希望首先执行encodeURIComponent()调用，以避免HTML实体符号被弄乱。在HTML解析器完成字符串后，实体符号将消失：

function qEncode(str) {
  return encodeURIComponent(str).replace(/'/g, "&#39;");
}

使用它：

tr.append("<a href='add_widget.html?id=" + 
  qEncode(data[i].id) + "&pg=" + 
  qEncode(data[i].page_number) + "&dest=" + 
  qEncode(data[i].dest) + "&name=" + 
  qEncode(data[i].name) + 
  "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>"
);

请注意，您也可以对双引号字符进行编码。

解决此问题的一种完全不同的方法是使用DOM API构建DOM内容。通过这样做，您完全避免使用HTML解析器，而您只需要encodeURIComponent()。

Answer 3

使用escape(data[i].name)代替data[i].name.replace("'","\\'")，可以解决您的问题。

Answer 4

你需要思考，解释我的代码是什么，所以我需要逃避什么？

您的代码将由浏览器中的 HTML Interpreter 解释
您的代码将被解释为 URI

这意味着您需要以相反的顺序对它们进行转义/编码。幸运的是， JavaScript 提供了一个 URI 编码器作为encodeURIComponent，但它没有提供 HTML 编码器（可能与我们一样） DOM方法）但对于重要角色来说实施起来并不困难，例如

function html_encode(str) {
    var re_chars = /[<>'"]/g;
    function replacer($0) {
        return '&#' + $0.charCodeAt(0) + ';'
    }
    return str.replace(re_chars, replacer);
}
// example follows
html_encode('<foo bar="baz">'); // "&#60;foo bar=&#34;baz&#34;&#62;"

所以对你来说，

attrib_value = html_encode(/* ... + */ encodeURIComponent(data[i].name) /* + ... */ );

为了完整，

function html_decode(str) {
    var re = /&(?:#\d{1,3}|amp|quot|lt|gt|nbsp);/g, // notice extra entities
        d = document.createElement('div');
    function replacer($0) {
        d.innerHTML = $0;
        return d.textContent;
    }
    return str.replace(re, replacer);
}
// and an example
html_decode('&#60;foo bar=&#34;baz&#34;&#62;'); // "<foo bar="baz">"

如何在查询字符串中使用撇号嵌入值

4 个答案: