JS 把url的参数解析成对象

最新推荐文章于 2025-06-27 09:02:41 发布

a_靖

最新推荐文章于 2025-06-27 09:02:41 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS Web前端文章标签：解析路径带的参数解析HTTP地址所带的参数把HTTP的参数解析成对象 url参数解析 url参数

本文链接：https://blog.csdn.net/qq_35713752/article/details/80060315

Web前端同时被 2 个专栏收录

406 篇文章

订阅专栏

186 篇文章

订阅专栏

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

实现思路：请看log和打印结果

// url参数解析
function getUrlkey(url) {
  var params = {};
  var urls = url.split("?");                  console.log('1_分割url:', urls)
  var arr = urls[1].split("&");               console.log('2_分割urls[1]:', arr)
  for (var i = 0, l = arr.length; i < l; i++) {
    var a = arr[i].split("=");                console.log('3_遍历 arr 并分割后赋值给a:', a[0], a[1])
    params[a[0]] = a[1];                      console.log('4_a给params对象赋值:', params)
  }                                           console.log('5_结果:', params)
  return params;
}

console.log(6,getUrlkey('http//aaa/txt.php?a=1&b=2&c=3'))

打印结果：

加强版：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>https://a-jing.blog.csdn.net/</title>
    </head>

    <body>
        <h4>当前页面的url中的参数</h4>
		<div id="urlItem"></div>
        <script type="text/javascript">
			/*
			  url 		  String   可选参数， url地址
			  OneKey 	  String   可选参数， 获取当前网址指定参数
			  Delete_key  Array    可选参数， 过滤指定参数
			*/
            var getUrlData =function (url,OneKey,Delete_key=[]){
              if(!url)url = window.location.search;
              var url_l = url.split('?')[1];
              var url_ll = url_l.split('&'),obj ={};
              url_ll.forEach((item,idx)=>{
                var key = item.split('=')[0];
                var val = item.split('=')[1];
                if(Delete_key.indexOf(key)==-1) obj[key] = val;
              })
			  if(OneKey&&url_l.indexOf(OneKey))return obj[OneKey];
              return obj;
            }();
			
			var html='';
			
			console.log('当前的url为：',window.location.search)
			console.log('当前url的参数对象：',getUrlData)
			
			for (let item in getUrlData) {
				html +=`<p> ${item} : ${getUrlData[item]}</p>`
			}
			document.getElementById('urlItem').innerHTML = html;
        </script>
    </body>

</html>