js解析url地址栏

最新推荐文章于 2025-06-04 12:22:04 发布

苏七的猫

最新推荐文章于 2025-06-04 12:22:04 发布

阅读量1.7k

点赞数

分类专栏： js

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个实用的JavaScript函数，能够将URL中的查询参数解析并转换为易于操作的对象格式，通过示例展示了如何使用该函数来获取和处理网页URL中的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请编写一个 JavaScript函数 parseQueryString, 它的用途是把 URL 参数解析为一个对象，如：
var url= ‘http://www.baobao.com/index.php?key0=aaa&key1=1&key2=2’;
var obj = parseQueryString(url);
console.log(obj.key0) // 输出0

结果：
obj = {
key0:0,
key1:1,
key2:2
}

<script type="text/javascript">
// vue里用this.$router.query 可以获取到地址栏？后面的参数

	// 把URL参数解析为一个对象
	function parseQueryString(urlStr){
		// ?号后面的位置
		var pos = urlStr.indexOf('?') + 1;
		// 参数的字符串
		var paramsStr = urlStr.substring(pos);
		console.log(paramsStr);

		// 声明对象
		var obj = {};
		// 把参数添加到对象中
		var paramsArr = paramsStr.split('&');

		// 数组循环
		paramsArr.forEach( function(element) {
			// element == key0=aaa
			var _arr = element.split('=');
			// 往对象里添加内容
			obj[_arr[0]] =  _arr[1];			
		});
		// 返回对象
		return obj;
	}
	var url= 'http://www.baobao.com/index.php?key0=aaa&key1=1&key2=2';
	var obj = parseQueryString(url);
	// var urlIndex = document.location.href;         //获取地址栏地址
	console.log(obj)
	console.log(obj.key0)  // 输出0
</script>