let url = `http://xxxxxxx?key1=value1&key2=%7B%22id%22%3A%22o8x0oxCIK_Mo9qD48iTmPC0KVFpQ%22,%22have%22%3A%221%22%7D`

这是地址要如何处理?(这些%xx是转义符)
可以百度:

url转义字符表

1.将url恢复成正常url.

url = decodeURIComponent(url); // 可以完全清除掉所有的转义字符
url = decodeURI(url) // 有时候不能完全正常需要用到replaceAll,也可以重复
let url2 = url;
do {
	url = url2;
	url2 = URLDecoder.decode(url, "UTF-8");
} while(!url.equals(url2))
  1. 如何判断网址中是否含有转义字符?
let reg = /%(22|7D|7B|3A|...)/g; // ...代表其他转义符
console.log(reg.test(url)); // url 为网址  
/*
结果: true, 代表有,则用decodeURIComponent(url);
结果: false, 代表无,则原值返回。
*/
  1. 如何获取当前网址? 跳转页面?
console.log(window.location.href);
location.herf = url; // url:跳转链接
  1. 如何传多个参数在一个key值上面?
// 编码传值   escape 废弃   使用encodeURI()/encodeURIComponent();
let params = {
	key1:  'value1',
	key2: 'value2',
	key3: 'value3',
	....
}
// 第一种写法 也可以使用`${}` 
let escapeUrl = JSON.stringify(params);
let url =  'http:xxx.com/xxx?key=' + encodeURI(escapeUrl));  // encodeURI()/encodeURIComponent();
// 第二种
let escapeParams = encodeURI(JSON.stringify(params)); // encodeURI()/encodeURIComponent();
let url =  'http:xxx.com/xxx?key=' + escapeParams;
// 第三种
let url = 'http:xxx.com/xxx?key=' +encodeURI(JSON.stringify(params)); // encodeURI()/encodeURIComponent();
// 然后采用 1, 2 ,使用JSON.parse()解析解析ok
  1. encodeURL和encodeURLComponent的区别?
    区别:1.encodeURL()不会url的特殊字符进行编码,例如“冒号、正斜杠、问号、井号”;encodeURLComponent()则会对url中任何非标准字符进行编码。
    2.encodeURL()是对整个url;而encodeURLComponent()一般用于给某个特定的字符进行转义。
// encodeURL和encodeURLComponent的区别? 
let url = 'http://baidu.com';

let encodeURLUrl =  encodeURI(url);
let encodeURLComponentUrl =  encodeURIComponent(url);

console.log('encodeURLUrl', encodeURLUrl); // http://baidu.com
console.log('encodeURLComponentUrl', encodeURLComponentUrl); // http%3A%2F%2Fbaidu.com

url = 'https://blog.csdn.net/qq_43432158/article/details/120179967';

encodeURLUrl =  encodeURI(url);
encodeURLComponentUrl =  encodeURIComponent(url);

console.log('encodeURLUrl', encodeURLUrl); // https://blog.csdn.net/qq_43432158/article/details/120179967
console.log('encodeURLComponentUrl', encodeURLComponentUrl); // https%3A%2F%2Fblog.csdn.net%2Fqq_43432158%2Farticle%2Fdetails%2F120179967

完整代码:

let escapeUrl = `http://xxx.com?key=%7B%22id%22%3A%22wmOiaBDwAAb1F8DJvQ71P7j6dsFSz8lg%22,%22userId%22%3A%22950a75a4007540a191b70af4cd9002ac%22%7D&key2=%7B%22keyOne%22%3A%22o8x0oxEGd-mb9pZyV6bLew5A9ogI%22,%22KeyTwo%22%3A%221%22%7D`
let reg = /%(22|7D|7B|3A|221)/g;
let url;
console.log(reg.test(escapeUrl))
if (reg.test(escapeUrl)) {
    url = decodeURIComponent(escapeUrl); // encodeURI()/encodeURIComponent();
} else {
    url = escapeUrl;
}
console.log(url)
/*
let params = url.substring(url.indexOf('?') + 1, url.length);
let param = params.split('&');
let key1 = JSON.parse(param[0].substring(param[0].indexOf('=') + 1, param[0].length))
let key2 = JSON.parse(param[1].substring(param[1].indexOf('=') + 1, param[1].length))
*/

let param = _dealKey(url, '?').split('&');
let key1 = _dealKey(param[0], '=', true)
let key2 =  _dealKey(param[1], '=', true)
function _dealKey (str, symbol, isObj) {
    if (isObj) {
        return JSON.parse(str.substring(str.indexOf(symbol) + 1, str.length))
    } else {
        return str.substring(str.indexOf('?') + 1, str.length);
    }
}
console.log(key1);
let id = key1.id;
let userId = key1.userId;
console.log(key2);
let keyOne = key2.keyOne;
let keyTwo = key2.keyOne;

知识点:(一一对应)

转义方法:
escape(); // 对字符串进行编码 废弃
encodeURI(); // 把字符串作为 URI 进行编码
encodeURIComponent(); // 把字符串作为 URI 组件进行编码
解码方法:
unescape(); // 对通过 escape() 编码的字符串进行解码 废弃
decodeURI(); // 对 encodeURI() 函数编码过的 URI 进行解码
decodeURIComponent(); //对 encodeURIComponent() 函数编码的 URI 进行解码

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐