Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Preface: I believe we are familiar with obtaining browser parameters, the first reaction is to use regular expression to cut the browser parameters, but the browser has provided a URLSearchParams this interface to us to operate the URL query string

Get the URL using a regular expression

Let’s take a look at the code that uses regular expressions to get URL parameters

function getParams(url, params){
      var res = new RegExp("(? : & | /?) " + params + "= ([^ & $] +)").exec(url);
      return res ? res[1] : ' ';
}

// url: xx.com?id=2&isShare=true
const id = getParams(window.location.search, 'id')

console.log(id) / / 2
Copy the code

However, we no longer need to get the query parameters of the browser so complicated, the browser directly provides us with a URLSearchParams interface, which allows us to have a lot of space to manipulate query parameters, and compared to the previous use of re, more concise and direct

About the URLSearchParams method

Code implementation

How to use the URLSearchParams method to achieve the url parameters of the code to present

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

console.log(params) // {id: '2', isShare: 'true'}
console.log(params.id) / / 2
Copy the code

It’s super simple. Just pass in the URL, create an instance object of URLSearchParams, and call entries() to return an iterative protocol iterator that allows you to iterate through a list of all supported key/value pairs

We then need to use the object.fromentries () method to get the list of keys and value pairs, and can happily use the obtained parameters

URLSearchParams compatibility

Have a look at URLSearchParams compatibility queries, click here for details

IE is really the root of all evil, other modern browsers are extremely compatible, if it is not compatible with IE projects, can rest assured to eat

If you really want to be compatible with IE, don’t be afraid to use urL-search-params-polyfill

Installation method:

npm install url-search-params-polyfill --save
Copy the code

Usage:

const params = new URLSearchParams("id=2&isShare=true");
Copy the code

conclusion

The above is I use URLSearchParams() to obtain the browser parameters, I hope to help you ~ your like is very important to me, I hope to get your like 👍 ~ we can also communicate in the comments section, oh, thank you ~

More articles recommended:

“Look at the Vue3 script-setup syntax and learn how to communicate with components.”

“Super detailed! Monitor five kinds of micro channel small programs to cut the background situation”

“No more confusion! This article will give you a silky experience with Vue3.0 development.”

“Learn to countdown in three minutes using requestAnimationFrame”

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”