Business scenario: There is an H5 page in the APP that needs to be shared to wechat. If the user clicks the message, the page will be redirected to confirm the information and then guide the user to download another application. What we front-end engineers need to do is to get the shared parameters in the address bar of this web page and display them in the information confirmation page.

URL (for example) : www.baidu.com/?taskId=202…

Page to write the effect diagram, we need to obtain the value of the parameters of the three fields from the address bar policy-holder, ID number, policy application number.

Use regular expressions to fetch the array objects we need.

// Use a regular expression to fetch the values of applicantName, idNo, and applicationNo. let baseUrlStr = 'https://www.baidu.com/?taskId=xx0082711193811100006371658258&applicationNo=xxxx043450959360&applicantName= port & idNo = xxxx2 lee 6199703180911&serno=eg4ns2p&roomNo=null&appid=xxxxx16237&appkey=xxxx56ada93f832e63e0257cfee2b6c5df55b4ff254d19f458b03482 6a1e3&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));Copy the code

Let me print it at the console. It’s an array object.

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);
Copy the code

After fetching the value, replace it with the web content.

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

Then we looked at the renderings, and it was exactly what we wanted.

Now that we’re done, we don’t have to show you the HTML layout. It’s very simple. Provide a way to get url ideas, interested comrades can also try location.search, string interception and other ways.