前端使用正则表达式获取地址栏URL参数的值并将需要的参数值展示在页面

原创

孙叫兽

修改于 2023-09-24 18:46:25

2.3K0

修改于 2023-09-24 18:46:25

业务场景：APP中有个H5页面需要分享到微信，用户点击这个消息会跳转到这个网页进行信息确认，然后引导用户下载另一个应用。我们前端工程师需要做的就是将分享的参数在这个网页的地址栏进行获取并展示在信息确认页面。

URL地址(例)：https://www.baidu.com/?taskId=202008271119381110000637165xxxx&applicationNo=620043450959360&applicantName=李港&idNo=xxxx26199703180911&serno=eg4ns2p&roomNo=null&appid=xxxx316237&appkey=xxxxa62356ada93f832e63e0257cfee2b6c5df55b4ff254d19f458b034826a1e3&housekeeperPageUrl=https://www.baidu.com

页面写好效果图，我们这时需要从地址栏获取投保人，身份证号，投保单号这三个字段的参数的值。

使用正则表达式取出我们需要的数组对象。

// 使用正则表达式取出投保人applicantName，身份证号idNo，投保单号applicationNo，三个参数的值。
		let baseUrlStr = 'https://www.baidu.com/?taskId=xx0082711193811100006371658258&applicationNo=xxxx043450959360&applicantName=李港&idNo=xxxx26199703180911&serno=eg4ns2p&roomNo=null&appid=xxxxx16237&appkey=xxxx56ada93f832e63e0257cfee2b6c5df55b4ff254d19f458b034826a1e3&housekeeperPageUrl=https://www.baidu.com';
		const queryURLParameter = (url) => {
		  let regx = /([^&?=]+)=([^&?=]+)/g;
		  let obj = {};
		
		  url.replace(regx, (...args) => {
		    if (obj[args[1]]) {
		      obj[args[1]] = Array.isArray(obj[args[1]])
		        ? obj[args[1]]
		        : [obj[args[1]]];
		      obj[args[1]].push(args[2]);
		    } else {
		      obj[args[1]] = args[2];
		    }
		  });
 return obj;
		};
// console.log(queryURLParameter(baseUrlStr));

控制台打印一下。是个数组对象。

这个时候我们需要取出这个数组中，applicantName，idNo，applicationNo三个字段的值。

const list=[queryURLParameter(baseUrlStr)];
		const applicantName=list.map(item=>item.applicantName);
		// console.log(applicantName);
		const idNo=list.map(item=>item.idNo);
		// console.log(idNo);
		const applicationNo=list.map(item=>item.applicationNo);
		// console.log(applicationNo);

取出值之后，替换到网页内容即可。

document.getElementById("applicantN").innerHTML=applicantName;
document.getElementById("idN").innerHTML=idNo;
document.getElementById("applicationN").innerHTML=applicationNo;

这时我们查看效果图，刚好是我们想要的样子。