JavaScript开发中自动获取URL参数的方法有几种

最新推荐文章于 2024-05-19 09:55:27 发布

doiido

最新推荐文章于 2024-05-19 09:55:27 发布

阅读量236

点赞数

文章标签： javascript 开发语言 url

本文链接：https://blog.csdn.net/doiido/article/details/134125932

版权

URL，称为统一资源定位器，指互联网上能找到资源定位的字符串。在一般语境中，又称网络地址或链接，当我们需要访问某个网页就需要输入对应的网址字符串，而这个网址就是URL。

前端对于网址链接，提供了URL对象，可以用于创建或解析网址字符串信息；而Nodejs中也有相应模块来处理网址，同样支持URL类对象，与浏览器环境下兼容。

URL实例属性和方法

hash：包含'#'的片段标识符
host：包含域名(主机名|IP地址等)、端口(如有)的字符串
hostname：域名(主机名|IP地址等)字符串，不包含端口
href：完整的网址字符串
origin：只读，包含协议、域名、端口的字符串
password：域名前指定的密码，现在一般很少见
pathname：以 / 符号开头的文件路径(大致是域名host以后、参数search之前的部分)
port：端口号字符串
protocol：网络协议字符串
search：参数字符串，包含 ? 符号
searchParams：只读，URLSearchParams 对象，用于访问参数字符串
username：域名前指定的用户名，现在一般很少见
toString()：完整的网址字符串，与URL.href相同
toJSON()：完整的网址字符串，与 URL.href 以及 toString() 基本相同

实例方法多用于修改和解析网址，方便我们处理；而URL对象还提供了静态方法，用于创建 Object URL。

一、字符串 split 方法

url 地址是字符串形式的，所以利用 split 方法将参数提取出来，该方法比较常用，而且容易理解（无关正则）

let url = "http://www.baidu.com?name=小宇&age=25&sex=男&wife=小君";
function geturlparams(url) {
    // 通过 ? 分割获取后面的参数字符串
    let urlstr = url.split('?')[1];
    // 创建空对象存储参数
	let obj = {};
    // 再通过 & 将每一个参数单独分割出来
	let paramsarr = urlstr.split('&');
	for(let i = 0,len = paramsarr.length;i < len;i++){
        // 再通过 = 将每一个参数分割为 key:value 的形式
		let arr = paramsarr[i].split('=');
		obj[arr[0]] = arr[1];
	}
	return obj;
}
console.log(geturlparams(url));

二、使用 urlsearchparams 方法

URLSearchParams 对象专门用于处理url网址信息中的查询字符串，在网址字符串中通常都是 ? 问号之后的内容(不包含问号)。

在URL对象中也有一个属性 searchParams 返回该对象，会对查询字符串做解析处理，以等号分割生成对应的 key-value 键值对的数据形式。

const myUrl = new URL('https://www.baidu.com/s?wd=中国')
// myUrl.searchParams 返回的是包含 `wd=中国` 内容的对象
myUrl.searchParams.get('wd') // 输出：'中国'

URLSearchParams 对象也可以使用构造函数，自定义一个实例：

const urlSearchParams = new URLSearchParams('wd=中国&city=上海')
urlSearchParams.get('city') // 输出：'上海'

URLSearchParams 对象实例是一个迭代器(Iterator)对象，可以使用JavaScript中的遍历语法，输出每一项的[key, value]

for (const usp of urlSearchParams) {
  console.log(usp)
}
// ['wd', '中国']
// ['city', '上海']

三.利用正则匹配方法

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
	// \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
	let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
	let result = {};
	url.replace(pattern, ($, $1, $2)=>{
		result[$1] = $2;
	})
	return result
}
console.log(getUrlParams3(URL))

四.使用第三方库 qs

qs是一个Node.js模块，用于解析查询字符串(query string)。查询字符串是一组键值对(key-value)字符串，用来在URL中传递参数。qs模块可以将查询字符串解析为JavaScript对象，并且还可以将JavaScript对象序列化成查询字符串。

安装

使用npm安装qs模块：

npm install qs

解析查询字符串

使用qs模块的parse()方法可以将查询字符串解析为JavaScript对象。以下是一个示例：

const qs = require('qs');
const queryString = 'name=Emily&age=25';

const obj = qs.parse(queryString);

console.log(obj);
// 输出：{ name: 'Emily', age: '25' }

上面的代码中，parse()方法将查询字符串queryString解析为一个JavaScript对象obj，并输出到控制台中。