encode/decodeURI 用于带引号的 URL

Question

我无法向其中包含引号的 URL 显示 links，尽管 Whosebug 上有大量示例，但我无法找出解决方案！这是我存储在数据库中的确切字符串（显示 Adelaide Antartica）

https://www.google.com/maps/place/67%C2%B007'27.3%22S+68%C2%B008'56.0%22W/@-67.1447827,-68.3886741,71373m/data=!3m1!1e3!4m5!3m4!1s0x0:0x0!8m2 !3d-67.124258!4d-68.148903

当我尝试将其放入 href 时，它 links 到...

https://www.google.com/maps/place/67%C2%B007（即在第一个单引号处中断）

但我尝试使用 href="encodeURI(theLink)" 或 href="encodeURIComponent(theLink)" 它 links 来做同样的事情（我什至尝试了解码选项以防我考虑它方法不对，遇到了同样的问题）。

有没有人对这里的最佳处理方式有任何建议？我什至尝试过已弃用的 "escape" 函数，它对我也不起作用。感谢您的任何想法！

(p.s。有趣的是，在我写这篇文章的时候，我看到甚至 Stack Overflow 的 link 也以完全相同的方式被破坏了——也许这甚至不可能？！）

编辑：按照 Clemzd 的要求 - 我正在使用 d3 构建 links，所以这样做...

anElement.append("text").html("<a href='" + myData[i].url + "'> a link name </a>");

无论我是否使用 encodeURI(myData[i].url)

，在使用单引号 link 以外的所有方面都表现出色

Answer 1

您使用单引号来分隔 href 属性的值，因此该值不能包含未转义的单引号。这是 HTML 标记编码的问题，而不是 URL 编码。

您可以反转单引号和双引号的使用（编码的 URL 不能包含双引号，但它们可以包含单引号）或将 URL 中的单引号替换为字符实体，如 '。 URL 由 %27 编码也可以，但这不是 encodeURIComponent 的标准编码。

Answer 2

有很多方法可以解决您的问题。您需要知道的是，如果您的输入可能包含 ' 那么您必须转义该字符。否则，您将得到类似 anElement.append("text").html("<a href='" + https://www.google.com/maps/place/'link + "'> a link name </a>"); 的内容，由于 '.

而无法解析

如果您确定您的 link 永远不会包含 " 那么请更改您的代码并使用 " 作为连接运算符。

如果没有，您可以在服务器端或客户端转义'。例如在客户端你可以这样做：

function escapeJavascript(input){
 return input.replace(/\n/g, "\n")
        .replace(/\'/g, "\'")
        .replace(/\"/g, '\"')
        .replace(/\&/g, "\&")
        .replace(/\r/g, "\r")
        .replace(/\t/g, "\t")
        .replace(/\b/g, "\b")
        .replace(/\f/g, "\f");
}

然后像这样使用它：anElement.append("text").html("<a href='" + escapeJavascript(myData[i].url) + "'> a link name </a>");

encode/decodeURI 用于带引号的 URL

encode/decodeURI for URLs with quotes

html

url

escaping

encodeuricomponent

decodeuricomponent