使用JavaScript对URL进行解析，提取其中的键值对
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Resolve URL</title> </head> <body> <script> var url="http://guangzai:hello@www.abc.com:8080/lujing/list.pathname?id=123&name=guang#top"; function parseUrl(url){ //创建 <a>标签元素，使其 href 属性指向 url，这样就可以使用 HTMLHyperlinkElementUtils 提供的属性了 var link=document.createElement("a"); link.href=url; return { //href 包括整个URL url:link.href, //获取 protocol 默认包括冒号 protocol:link.protocol.replace(":",""),//如 http: username:link.username,//如 guangzai password:link.password,//如 hello //获取 host 默认包括端口，但不包括默认端口 host:link.host,//如 www.example.com:5678 //获取 hostname 不包括端口 hostname:link.hostname,//如 www.example.com //获取 port 默认端口则返回字符串 port:link.port, //如 1234 //获取 origin 包括 protocol+host origin:link.origin, //获取 pathname 包括 origin -- search 之间的字符 pathname:link.pathname,//如 /source/index.pathname , /source/images , /source/images/ //search 返回 URL中的所有参数及相关符号，如 ?id=123&name=guang parameters:(()=>{ var param={};//定义对象用于存储参数 var searchArr=link.search.replace("?","").split("&");//去除问号并分割参数字符串，存储在数组中 searchArr.forEach((item)=>{ var arr=item.split("=");//分割参数字符串，存储在数组中 param[arr[0]]=arr[1];//将参数名以及对应的值存在在对象中 }) return param;//返回最终的结果 })(), //获取 hash 默认包括井号 hash:link.hash.replace("#",""), } } console.log(parseUrl(url)); //上述例子返回的结果如下： var result= { "url": "http://guangzai:hello@www.abc.com:8080/lujing/list.pathname?id=123&name=guang#top", "protocol": "http", "username": "guangzai", "password": "hello", "host": "www.abc.com:8080", "hostname": "www.abc.com", "port": "8080", "origin": "http://www.abc.com:8080", "pathname": "/lujing/list.pathname", "parameters": { "id": "123", "name": "guang" }, "hash": "top" } </script> </body> </html>