2023-12-07发表2023-12-15更新技术10 分钟读完 (大约1444个字)

URL转义

基础概念

URI，统一资源标识符。是一个指向资源的字符串。

URL，统一资源定位符。指定在 Internet 上可以找到资源的位置的文本字符串。URL是URI。用作网页地址，URL 也可用于文件传输（FTP），电子邮件（SMTP）和其他应用。

URN，统一资源名称。URN是标准格式的 URI，指的是资源而不指定其位置或是否存在。

URL为什么需要转义？

在HTTP GET、POST等请求中特殊字符”&”, “+”, “=”等，不编码转义的话，可能会生成错误的URL

JavaScript中的编码方法

js有一套对URI编码的API decodeURI() decodeURIComponent() encodeURIComponent() encodeURI()

请注意，encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的 URI，例如对于 XMLHTTPRequests，因为 “&”, “+”, 和 “=” 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

encodeURI 不转义的字符：
    A-Z a-z 0-9 - _ . ! ~ * ' ( ) # ; , / ? : @ & = + $
encodeURIComponent 不转义的字符：
    A-Z a-z 0-9 - _ . ! ~ * ' ( )

var set1 = ";,/?:@&=+$"; // 保留字符
var set2 = "-_.!~*'()"; // 不转义字符
var set3 = "#"; // 数字标志
var set4 = "ABC abc 123"; // 字母数字字符和空格

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (空格被编码为 %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (空格被编码为 %20)

验证URL是否有效

js 2023新增方法 URL.canParse(url) URL.canParse()

1 2	URL.canParse('https://developer.mozilla.org/en-US/docs/Web/API/URL/canParse_static'); // true URL.canParse('developer.mozilla.org/en-US/docs/Web/API/URL/canParse_static'); // false

URL.canParse()依靠和URL()构造函数相同的算法来判定有效的URL，所以还可以直接new一个构造函数来验证（推荐，兼容性好）：

function isUrlValid(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}
isUrlValid('https://www.stefanjudis.com'); // true
isUrlValid('www.stefanjudis.com'); // false

URL转义字符表

编码	字符
`%20`	空格
`%21`	!
`%22`	“
`%23`	#
`%24`	$
`%25`	%
`%26`	&
`%27`	‘
`%28`	(
`%29`	)
`%2A`	*
`%2B`	+
`%2C`	,
`%2D`	-
`%2E`	.
`%2F`	/
`%30-%39`	0-9
`%3A`	:
`%3B`	;
`%3C`	<
`%3D`	=
`%3E`	>
`%3F`	?
`%40`	@
`%41-%5A`	A-Z
`%5B`	[
`%5C`	\
`%5D`	]
`%5E`	^
`%5F`	_
`%60`	`
`%61-%7A`	a-z
`%7B`	{
`%7C`	\|
`%7D`	}
`%7E`	~

参考

URI通用格式： [协议名]://[用户名]:[密码]@[主机名]:[端口]/[路径]?[查询参数]#[片段ID]

URL标准格式：[协议类型]://[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]

URL完整格式：[协议类型]://[访问资源需要的凭证信息]@[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]

其中[访问凭证信息]、[端口号]、[查询]、[片段ID]都属于选填项

URI 例子：

                    hierarchical part
        ┌───────────────────┴─────────────────────┐
                    authority               path
        ┌───────────────┴───────────────┐┌───┴────┐
  abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
  └┬┘   └───────┬───────┘ └────┬────┘ └┬┘           └─────────┬─────────┘ └──┬──┘
scheme  user information     host     port                  query         fragment

  urn:example:mammal:monotreme:echidna
  └┬┘ └──────────────┬───────────────┘
scheme              path