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

Today Xiaobian to share with you JavaScript how to get URL parameters related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone to refer to, I hope you read this article after some gains, let's learn about it together.

1. String split method

url address is in the form of a string, so the parameters are extracted using the split method, which is more commonly used and easy to understand (unrelated regular)

let URL = "http://www.baidu.com? name= Xiao Yu &age=25&sex= Male &wife= Xiao Jun ";function getUrlParams(url) { //Passed? Split to get the parameter string behind let urlStr = url.split('? ')[1]; //Create empty object storage parameters let obj = {}; //then separate each parameter separately by & let paramsArr = urlStr.split('&'); for(let i = 0,len = paramsArr.length;i

< len;i++){ // 再通过 = 将每一个参数分割为 key:value 的形式 let arr = paramsArr[i].split('='); obj[arr[0]] = arr[1]; } return obj;}console.log(getUrlParams(URL)); 二、使用 URLSearchParams 方法1、解析搜索字符串let url = 'https://www.baidu.com/s?ie=UTF-8&wd=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1';let urlStr = url.split('?')[1];const params = new URLSearchParams(urlStr);console.log(params.get('k')); // 返回字符串"许善祥"，支持自动 UTF-8 解码console.log(params.get('p')); // 返回字符串"1"console.log(params.get('xxx')); // 如果没有 xxx 这个键，则返回 nullconsole.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键console.log(params.keys()); // 返回一个 ES6 Iterator，内含 ['k', 'p']console.log(params.values()); // 返一个 ES6 Iterator，内含 ['许善祥', '1']console.log(params.entries()); // 与 Map.prototype.entries() 类似2、生成搜索字符串const params = new URLSearchParams();params.set('k', '许善祥'); // 设置参数params.set('p', 1); // 支持 Boolean、Number 等丰富类型console.log(params.toString()); // k=%E8%AE%B8%E5%96%84%E7%A5%A5&p=13、Node.js 代码const { URLSearchParams } = require('url');const urlSearchParams = new URLSearchParams();三、使用正则匹配方法 正则匹配功能强大，不仅可以实现在登录注册时的账号、密码、邮箱、手机号等验证（看这里），还可以非常方便的处理一些字符串（校验、替换、提取等操作）。 let URL = 'http://www.baidu.com?name=祥&friend=宇';function getUrlParams3(url){ // \w+ 表示匹配至少一个(数字、字母及下划线), // [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符 let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig; let result = {}; url.replace(pattern, ($, $1, $2)=>

{ result[$1] = $2; }); return result;}console.log(getUrlParams3(URL));// {name:'Xiang ', friend:'Yu'} IV. Use third-party library qs

The third-party library qs can also be used to extract parameter characters from url and convert parameter objects into url parameter forms. 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? name= Xiang &friend=';function getUrlParams4(url) { //When qs library is introduced, it will be hung on Qs attribute of global window by default // console.log(window); let urlStr = url.split('? ')[1]; let result = Qs.parse(urlStr); //splice extra parameters let otherParams = { homepage: 'xushanxiang.com' }; let str = Qs.stringify(otherParams); let newUrl = url + str; return {result, newUrl};}console.log(getUrlParams4(URL));

The above is all the content of this article "How to get URL parameters in JavaScript", thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone 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.