Shulou(Shulou.com)05/31 Report--

This article mainly introduces "js how to completely analyze url and splicing". In daily operation, I believe many people have doubts about how to fully analyze url and splicing in js. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to completely analyze url and splicing by js". Next, please follow the editor to study!

We often encounter that we need to resolve the url address or concatenate the url ourselves, so we need a js specially for url processing.

1. Understand url

Url consists of six parts.

For example:

Https://blog.csdn.net/weixin_43236062/article/details/109065450?id=1&name=huangnan

Agreement:

There are two common protocols, one is http and the other is https followed by: / /

Domain name / ip:

Blog.csdn.net / 192.169.1.0 DNS server resolves domain names to ip

Port

Range 0-65535 http default 80 https default 443

Hash

Hash the path that begins with # at the end of the url

Another kind is that history,history is'', and the example is history.

Path

/ weixin_43236062/article/details/109065450 is also equivalent to the name of the file

Parameters.

? id=1&name=huangnan. In? After that, it is cut by &, & before the key, and after the value.

Taken together, it can be concluded that

Protocol: / / Domain name (ip): Port / hash/ path? Parameters.

Url can also be abbreviated. Normally, nothing can be written except the path, which is equivalent to the relative path.

Once we know url, we can begin to parse or splice url.

2. Parsing url2.1, full parsing

For full analysis, we can use the a tag.

By printing the a label, we will find some key uses:

Origin, hash, pathname, these are all the attributes we often use.

Const parse = (path) = > {let data = {path:'', query: {}, origin:'' Hash:''} var tag = window.document.createElement ('a') tag.href = path data.origin = tag.origin data.hash = tag.hash data.path = tag.pathname let pathList = tag.search.split ('?) / / get query if (pathList [1]) {let queryList = pathList [1] .split ('&') queryList.map ((item) = > { Let queryData = item.split ('=') data.query [queryData [0]] = queryData [1]})} return data} 2.2, Take only the parameter const parseQuery = (path) = > {let query = {} Let queryList = path.split ('?) / / get query if (queryList [1]) {let queryDataList = queryList [1] .split ('&') queryDataList.map ((item) = > {let queryData = item.split ('=') data.query [queryData [0]] = queryData [1]}) return query} else {return false} 3, Merge urlconst build = (path Query = {}) = > {if (! _ isObject (query)) {console.error ('Please pass in the correct query') return} let str =' 'Object.keys (query) .forEach (key = > {str + = `& ${key} = ${path}? ${str.slice (1)}`}) so far The study on "how to fully analyze url and splicing by js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.