目录
URL对象.searchParams 对url的显示参数进行操作
前言
node的url模块在日常开发中经常使用，用来解析url和构成新的url。其中最常见的两个方法分别是parse()和resolve()
nodejs其它相关内容学习
扫描二维码关注公众号，回复：
14870254 查看本文章
关于url 我们需要了解其结构，这将有利于接下来的学习
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ href │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │ │ auth │ host │ path │ hash │
│ │ │ ├──────────────┬──────┼──────────┬────────────────┤ │
│ │ │ │ hostname │ port │ pathname │ search │ │
│ │ │ │ │ │ ├─┬──────────────┤ │
│ │ │ │ │ │ │ │ query │ │
" https: // user : pass @ sub.host.com : 8080 /p/a/t/h ? query=string #hash "
│ │ │ │ │ hostname │ port │ │ │ │
│ │ │ │ ├──────────────┴──────┤ │ │ │
│ protocol │ │ username │ password │ host │ │ │ │
├──────────┴──┼──────────┴──────────┼─────────────────────┤ │ │ │
│ origin │ │ origin │ pathname │ search │ hash │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│ href │
└─────────────────────────────────────────────────────────────────────────────────────────────┘url对象
const { URL } = require('url');
const myURL = new URL('https://user:[email protected]:8080/p/a/t/h?query=string#hash');
console.log(myURL)
/** URL {
href: 'https://user:[email protected]:8080/p/a/t/h?query=string#hash',
origin: 'https://sub.host.com:8080',
protocol: 'https:',
username: 'user',
password: 'pass',
host: 'sub.host.com:8080',
hostname: 'sub.host.com',
port: '8080',
pathname: '/p/a/t/h',
search: '?query=string',
searchParams: URLSearchParams { 'query' => 'string' },
hash: '#hash'
} */这个url对现象的属性的值和前言中图表对应
我们不光能通过url对象分解url的各个属性，我们也可以给url对象的属性赋值，从而改变url
const { URL } = require("url");
const myURL = new URL('https://user:[email protected]:8080/p/a/t/h?query=string#hash');
myURL.hash = 'dx'
console.log(myURL.href)
// https://user:[email protected]:8080/p/a/t/h?query=string#dx
myURL.protocol = 'http'
console.log(myURL.href)
// http://user:[email protected]:8080/p/a/t/h?query=string#dxURL对象.searchParams 对url的显示参数进行操作
const { URL } = require("url");
const myURL = new URL('https://user:[email protected]:8080/p/a/t/h?query=string&name=dx&age=18#hash');
// 查参数
console.log(myURL.searchParams.get('query')); // string
// 删除参数
myURL.searchParams.delete('query')
console.log(myURL.href) // https://user:[email protected]:8080/p/a/t/h?name=dx&age=18#hash
// 修改参数
myURL.searchParams.set('age', '25');
console.log(myURL.href) // https://user:[email protected]:8080/p/a/t/h?name=dx&age=25#hash
// 新增参数
myURL.searchParams.append('work','code');
console.log(myURL.href) // https://user:[email protected]:8080/p/a/t/h?name=dx&age=25&work=code#hashurl.parse 和 url.resolve
如果你觉得创建url对象再来操作很麻烦，url模块本身有两个常用方法，parse和resolve。
url.parse(urlString[, parseQueryString[, slashesDenoteHost]])
const url = require("url");
const URL1 = "https://user:[email protected]:8080/p/a/t/h?query=string&name=dx&age=18#hash";
console.log(url.parse(URL1))
/**
* Url {
protocol: 'https:',
slashes: true,
auth: 'user:pass',
host: 'sub.host.com:8080',
port: '8080',
hostname: 'sub.host.com',
hash: '#hash',
search: '?query=string&name=dx&age=18',
query: 'query=string&name=dx&age=18',
pathname: '/p/a/t/h',
path: '/p/a/t/h?query=string&name=dx&age=18',
href: 'https://user:[email protected]:8080/p/a/t/h?query=string&name=dx&age=18#hash'
}* */ 第二个参数是否将query解析成对象，默认为false
const url = require("url");
const URL1 = "https://user:[email protected]:8080/p/a/t/h?query=string&name=dx&age=18#hash";
console.log(url.parse(URL1, true))
/**
* Url {
protocol: 'https:',
slashes: true,
auth: 'user:pass',
host: 'sub.host.com:8080',
port: '8080',
hostname: 'sub.host.com',
hash: '#hash',
search: '?query=string&name=dx&age=18',
query: [Object: null prototype] { query: 'string', name: 'dx', age: '18' },
pathname: '/p/a/t/h',
path: '/p/a/t/h?query=string&name=dx&age=18',
href: 'https://user:[email protected]:8080/p/a/t/h?query=string&name=dx&age=18#hash'
}* */ 第三个参数是否改变host的判定方式，一般很少用
slashesDenoteHost 如果为 true，则 // 之后至下一个 / 之前的字符串会被解析作为 host。 例如，//foo/bar 会被解析为 {host: 'foo', pathname: '/bar'} 而不是 {pathname: '//foo/bar'}。 默认为 false。
url.resolve(from, to)
const url = require('url');
url.resolve('/one/two/three', 'four'); // '/one/two/four'
url.resolve('http://example.com/', '/one'); // 'http://example.com/one'
url.resolve('http://example.com/one', '/two'); // 'http://example.com/two'