Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about the method of obtaining URL parameters by the front-end JS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Method 1: string split method

Because an url address is in the form of a string, parameters are extracted using the split method, which is common and easy to understand (for me, who don't know how to use rules, ~)

Let URL = "http://www.baidu.com?name= Zhang San & age=25&sex= male & wife= Xiao Hong" function getUrlParams (url) {/ / pass? Split to get the following parameter string let urlStr = url.split ('?') [1] / / create empty object storage parameter let obj = {}; / / then split each parameter separately into let paramsArr = urlStr.split ('&') for (let I = 0Len = paramsArr.length;i

< len;i++){ // 再通过 = 将每一个参数分割为 key:value 的形式 let arr = paramsArr[i].split('=') obj[arr[0]] = arr[1]; } return obj}console.log(getUrlParams(URL)) 方法2: 利用 URLSearchParams 方法 在 MDN 中结合两种方法实现参数的获取：1. 使用 new URLSearchParams(url) 方法，返回一个 URLSearchParams 对象，再调用 entries() 方法返回一个可迭代对象（Iterator）；2. 使用 Object.fromEntries(iterable) 方法转化为普通对象 let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"function getUrlParams2(url) { let urlStr = url.split('?')[1] const urlSearchParams = new URLSearchParams(urlStr) const result = Object.fromEntries(urlSearchParams.entries()) return result}console.log(getUrlParams2(URL))

Special: the URLSearchParams method can not only get parameters, but also convert parameter objects to strings, as described in MDN, and there are browser compatibility issues with this method.

Method 3: using regular matching method

Regular matching is powerful. I believe many partners know that it can not only verify accounts, passwords, mailboxes, mobile phone numbers, etc., when logging in, but also easily deal with some strings (check, replace, extract, etc.). The difficulty lies in the proficiency of regular use, which is to extract the characters needed in the string through regular extraction.

Let URL = "http://www.baidu.com?name=Tom&friend=Jerry"function getUrlParams3 (url) {/ /\ w+ means to match at least one (numbers, letters and underscores). [\ u4e00 -\ u9fa5] + means to match at least one Chinese character let pattern = / (\ u4e00 -\ u9fa5] +) = (\ w+ | [\ u4e00 -\ u9fa5] +) / ig; let result = {} Url.replace (pattern, ($, $1, $2) = > {result [$1] = $2;}) return result} console.log (getUrlParams3 (URL))

Method 4: use the third-party library qs

The extraction of parameter characters in url can also be realized by using the third-party library qs, and the parameter object can also be converted into url parameter form. It should be noted that when the browser cdn mode is introduced, it is added to the Qs attribute of the global object window by default.

Let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price= for 9999.00" function getUrlParams4 (url) {/ / when introducing the qs library, it will be hung by default on the Qs attribute of the global window / / console.log (window) let urlStr = url.split ('?) [1] let result = Qs.parse (urlStr) / / splicing extra parameter let OtherParams = {num:50 Size:6.1} let str = Qs.stringify (otherParams) let newUrl = url + str return {result,newUrl}} console.log (getUrlParams4 (URL))

These are all the contents of the article "what are the ways for the front-end JS to get URL parameters?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.