Requirements:

QueryURLParams: Gets the information about the question mark parameter in the address bar

• ‘www.xxxxxxx.cn/?lx=1&name=… ‘
• Parsing the value after the question mark and hash sign yields an object containing information
  • {HASH: "video", lx: "1", name: "JS", from: "baidu"}

First, general re processing

(proto= > {
	function queryURLParams() {
		let obj = {};
		this.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => obj[key] = value);
		this.replace(/#([^?=&#]+)/g, (_, hash) => obj['HASH'] = hash);
		returnobj; } proto.queryURLParams = queryURLParams; }) (String.prototype);

console.log('http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video'.queryURLParams());
Copy the code

Second, use A tag built-in method

Principle: Use the built-in attributes of the A tag itself

• The A element object obtained in javascript contains A number of built-in attributes. We can see the following attributes:
  • search:’? lx=1&name=JS&from=baidu’,
  • hash:’#video’,
  • host:’www.xxxxxxx.cn’,
  • .

Using this attribute information we can easily fulfill requirements;

function queryURLParams(url) {
	// 1. Create A tag (A element object) to get the question mark argument and hash value
	let link = document.createElement('a');
	link.href = url;
	let askText = link.search.substr(1),
		polText = link.hash.substr(1),
		obj = {};
	// 2. Store data to the object
	polText ? obj['HASH'] = polText : null;
	if (askText) {
		let arr = askText.split(/ (? :&|=)/g); / / = > at the same time, in accordance with the two characters to break up: [" lx ", "1", "name", "JS", "from", "baidu"]
		for (let i = 0; i < arr.length; i += 2) {
			// console.log(arr[i], arr[i + 1]); Attribute name and attribute value
			obj[arr[i]] = arr[i + 1]; }}return obj;
}
let result = queryURLParams('http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video');
console.log(result);

/* <a href="http://www.xxxxxxx.cn/?lx=1&name=JS&from=baidu#video" id="link">*/
Copy the code

Use string built-in methods

IndexOf; substring; split; array; And a series of built-in string methods to complete the requirements;

function queryURLParams(url) {
	// 1. The preference is to get the value after the question mark and hash sign
	let askIndex = url.indexOf('? '),
		polIndex = url.lastIndexOf(The '#');
	let askText = url.substring(askIndex + 1, polIndex),
		polText = url.substring(polIndex + 1);
	// console.log(askText, polText); //=>"lx=1&name=JS&from=baidu" "video"

	// 2. Parse the obtained result and return it as an object
	let obj = {};
	// Handle hash values (values after hash signs)
	polText.length > 0 ? obj['HASH'] = polText : null;
	// Handle the question mark argument
	if (askText) {
		// askText.split('&') =>["lx=1","name=JS","from=baidu"]
		askText.split('&').forEach(item= > {
			// item: each item in the loop array
			let arr = item.split('='), //=>"lx=1" => ["lx",1]
				key = arr[0],
				value = arr[1];
			obj[key] = value;
		});
	}
	return obj;
}
Copy the code

• Another way to think about it

function queryURLParams(url) {
	let askIndex = url.indexOf('? '),
		polIndex = url.lastIndexOf(The '#'),
		askText = ' ',
		polText = ' ';
	polIndex === - 1 ? polIndex = url.length : null;
	polText = url.substring(polIndex + 1);
	if (askIndex > - 1) {
		askText = url.substring(askIndex + 1, polIndex);
	}
	let obj = {};
	polText.length > 0 ? obj['HASH'] = polText : null;
	if (askText) {
		askText.split('&').forEach(item= > {
			let arr = item.split('=');
			obj[arr[0]] = arr[1];
		});
	}
	return obj;
}
Copy the code

Mind mapping