js obtain several ways url parameter value

Example URL: https:? //Editor.csdn.net/ a = 1 & b = 2 & c = 3

Method One: Using regular expressions to obtain the address bar parameters (code simple, focusing on the regular)

function getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    };
    return null;
 }
 console.log(getQueryString('a'));// 1
 console.log(getQueryString('b'));// 2

Method two: split method Split (code more complex, easier to understand)

function getRequest() {
   const url = location.search; //获取url中"?"符后的字串
   let theRequest = new Object();
   if (url.indexOf("?") != -1) {
      let str = url.substr(1);
      let strs = str.split("&");
      for(let i = 0; i < strs.length; i ++) {
      	 let strsArr = strs[i].split("=");
         theRequest[strsArr[0]] = unescape(strsArr[1]);
      }
   }
   return theRequest;
}
console.log(getRequest());
/*
{a: "1", b: "2", c: "3"}
*/

Method three: split method Split (ease of understanding, the code rules)

function getQueryString(name){
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if(pair[0] == name)
        	{return pair[1];}
   }
   return(false);
}
 console.log(getQueryString('a));// 1
 console.log(getQueryString('b));// 2

Method 4: Use URLSearchParams API

It will return to us a URLSearchParams object.

The method of
the interface does not inherit any property.

• URLSearchParams.append () is inserted into a specified key / value as a new search parameters.
• () Removes the specified value from the list of search parameters in the search parameters and their corresponding URLSearchParams.delete.
• URLSearchParams.entries () returns an iterator can traverse the object of all key / value pairs.
• URLSearchParams.get () gets the first value of the specified search parameters.
• Gets all the values ​​specified search parameters URLSearchParams.getAll (), returns an array.
• URLSearchParams.has () Returns a Boolean parameter determines whether this search.
• URLSearchParams.keys () Returns iterator object contains the key / value pairs of all keys.
• URLSearchParams.set () to set a new value for the parameter search, if there is more than the original value will delete all other values.
• URLSearchParams.sort () button sorted by name.
• URLSearchParams.toString () Returns a string consisting of search parameters, it can be used directly on the URL.
• URLSearchParams.values ​​() Returns iterator object contains all values ​​of key / value pairs.

Examples official

var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

use

const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=young&sex=male"
params.has("young"); // true
params.get("sex"); // "male"