javascript：如何替换会破坏 URL 中查询字符串的特殊符号/字符答案

【问题标题】：javascript : how to replace special symbols/characters that will break your query string in your URLjavascript：如何替换会破坏 URL 中查询字符串的特殊符号/字符
【发布时间】：2020-11-30 17:50:59
【问题描述】：

我的 URL 中有这些组件 --

var myType="Air B&B";
var myID="RestInPeace";
var myURL="http://myhome.com?type="+myType+"&name="+myID;
alert(myURL);  //http://myhome.com?type=Air B&B&id=RestInPeace

myType 中的“&”在此处破坏了您的查询：

http://myhome.com?type=Air B&B&id=RestInPeace

页面依赖 id 来定位记录。它不会得到它，因为类型中的 '&' 破坏了查询！ myType 中的任何 uri 敏感字符都需要处理，以免破坏查询。

【问题讨论】：

标签： javascript regex url replace uri

【解决方案1】：

最好的方法是使用 URL()。使用

创建一个新网址

var myURL = new URL('http://myhome.com');

然后附加搜索参数，如

var myType="Air B&B";
var myID="RestInPeace";
myURL.searchParams.set('type',myType);
myURL.searchParams.set('name',myID);

这将返回一个类似的对象

hash: ""
host: "myhome.com"
hostname: "myhome.com"
href: "http://myhome.com/?type=Air+B%26B&name=RestInPeace"
origin: "http://myhome.com"
password: ""
pathname: "/"
port: ""
protocol: "http:"
search: "?type=Air+B%26B&name=RestInPeace"
searchParams: URLSearchParams {}
username: ""

所以基本上它会自动保留您的查询

【讨论】：

【解决方案2】：

从 1.5 版（ECMA-262 3rd edition，1999 年 12 月）开始，JavaScript 支持函数 encodeURI() 和 encodeURIComponent() 来完成这项工作。我不知道你们两个是如何监督这件事的。

另见问题Should I use encodeURI or encodeURIComponent for encoding URLs?

【讨论】：

它的工作原理是和否。它在正常情况下工作。当我将该 URL 传递给服务器页面进行安全检查时，它不起作用，例如“SafeWay.aspx?” + 我的网址。可能我的 SafeWay 应用程序没有正确解码这些编码。为了快速修复我的作品（目前），我只是将那些敏感字符替换为一行。
一旦理解了 HTTP URL 的外观必须像RFC 1738 以及哪一部分是路径以及参数从哪里开始，它就可以 100% 工作。 ? 应该只出现一次以分隔所有参数 - 如果参数本身再次使用 ?，则必须对其进行编码。这里没有魔法，只有逻辑应用。您的示例'SafeWay.aspx?' + myURL 表明您尚未了解参数是什么以及为什么它们不能使用所有字符。
只是带有编码参数的 url 本身就是另一个 url 的参数，它是 safeway 应用程序。是的，它需要在应用程序请求后进行处理。是的，在我的情况下，encodeURIComponent 可以 100% 工作，并在消耗时进行一些处理。

【解决方案3】：

由于第二个参数不是加载记录的关键，所以我会牺牲类型参数中的'&'。

这些字符会破坏您在 URI 中的查询：$ & : '" [ ] + { }。请参阅下面的快速替换，通过在 [] 中转义这些符号：表示任何一个[]中的那些符号

var myType="Air B&B";
var myID="RestInPeace";
var myURL="http://myhome.com?type="+myType.replace(/[\$\&\'\"\:\<\>\[\]\{\}\+]/g, '^')+"&name="+myID;
alert(myURL);  //http://myhome.com?type=Air B^B&name=RestInPeace

现在 myType 中的 '&' 被替换了。并且查询被保留。

http://myhome.com?type=Air B^B&name=RestInPeace

【讨论】：

这不是解决方案 - 它继续走错路。并且 URL 中的空格也没有正确编码。一旦äß 或ゾーン 或另一个问号被用作“查询”，祝你好运。