问题:
在做页面搜索功能的时候,需要URL地址中拼接查询关键字(key),然后 跳转到拼接后的地址(https://xxx.com/search?q=key)。如果key里面有中文字,浏览器会默认编码掉,所以这个页面调查询接口的时候需要先解码(/api/search?content=解码后的key),出现了上面的错误。
原因:
查询关键字包含一些浏览器敏感的关键词,例如:# , & , =
,而导致报错的是 %
,是因为编码汉字是 % 开头的,多加一个 % 会导致 decodeURIComponent 执行报错。
解决:
在点击查询拼接关键字key的时候,对key中含有敏感的词进行转译,例如,将%号转译为 %25
其他一些关键字的编码对应为:
特殊字符 | 含义 | 编码 |
---|---|---|
% | 指定特殊字符 | %25 |
# | 表示锚点 | %23 |
& | URL Search分隔符 | %26 |
= | URL中指定参数的值 | %3D |
写一个方法,把key中的敏感字编码掉再去拼接字符串查询就可以了,这样在使用decodeURIComponent 就没问题了。
例如:
// 对查询关键字中的特殊字符进行编码
encodeSearchKey(key) {
const encodeArr = [{
code: '%',
encode: '%25'
}, {
code: '?',
encode: '%3F'
}, {
code: '#',
encode: '%23'
}, {
code: '&',
encode: '%26'
}, {
code: '=',
encode: '%3D'
}];
return key.replace(/[%?#&=]/g, ($, index, str) => {
for (const k of encodeArr) {
if (k.code === $) {
return k.encode;
}
}
});
},