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

This article will explain in detail how to use native JS to obtain URL link parameters. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Summary of acquisition methods

There are also several ways to obtain URL link parameters using native JS. Today we will explain several common ones in turn:

By means of regular matching

Using the a tag built-in method

Using split method to partition method

Use the URLSearchParams method

two。 Specific implementation method 2.1 regular matching method

This is a very prescriptive approach, and the point is that we need to understand regular expressions.

The code is as follows:

/ / use the regular expression let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" / return parameter object function queryURLParams (url) {let pattern = / (\ w+) = (\ w+) / ig; / / define the regular expression let parames = {}; / / define the parameter object url.replace (pattern, ($, $1, $2) = > {parames [$1] = $2 }); return parames;} console.log (queryURLParams (url))

The focus of the previous code is on the definition of regular expressions and the use of the replace method, where $2 represents name=elephant, name, elephant, and so on. Replace can learn on its own with more detailed usage of the rules.

Achieve results:

2.2 using the a tag

This method is seldom used because, after all, it has the meaning of cool techs. Its principle is mainly to use the a tag to get some built-in attributes, such as href, hash, search and so on.

The code is as follows:

Let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig" function queryURLParams (url) {/ / 1. Create a tag let link = document.createElement ('a'); link.href = url; let searchUrl = link.search.substr (1); / / get the string let hashUrl = link.hash.substr (1) after the question mark; / / get the value let obj = {} after #; / / declare the parameter object / / 2. Store hashUrl in the object? Obj ['HASH'] = hashUrl: whether there is a value let list = searchUrl.split ("&") after null; / / #; for (let I = 0; I < list.length; iTunes +) {let arr = list [I] .split ("="); obj [arr [0]] = arr [1];} return obj;} console.log (queryURLParams (URL))

In the previous code, you first create an a tag, and then you can get each part of the url according to the attributes of the a tag, which is actually a bit similar to the route jump acquisition parameters of Vue.

Achieve results:

2.3 split Segmentation

This method makes use of the characteristic that split can divide a character string into an array, and skillfully divides each parameter.

The code is as follows:

Let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" function queryURLParams (URL) {/ / const url = location.search; / / in the project, you can get the url directly through the search method"? The string after the character let url = URL.split ("?") [1]; let obj = {}; / / declare the parameter object let arr = url.split ("&"); / / divide it into an array of for (let I = 0; I < arr.length; iDifference +) {let arrNew = arr [I] .split ("=") / / split into arrays obj [arrNew [0]] = arrNew [1];} return obj;} console.log (queryURLParams (URL)) with "="

In the upload code, if you are in an actual project, you can directly use location.search to obtain "?" For the following string, for demonstration purposes, split is used to split the following.

Achieve results:

2.4 URLSearchParams method

URLSearchParams method makes it very convenient for us to obtain URL parameters, but there are some compatibility problems. The official website explains as follows:

The URLSearchParams interface defines some practical methods to handle the query string of URL.

This API provides an extraordinary method for us to deal with URL parameters. Here we only introduce how to obtain URL parameter values. For more details, please refer to the official website.

The code is as follows:

Let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" function queryURLParams (URL) {let url = URL.split ("?) [1]; const urlSearchParams = new URLSearchParams (url); const params = Object.fromEntries (urlSearchParams.entries ()); return params} console.log (queryURLParams (URL))

Here we basically parse the parameters in only two main lines of code. It is important to note that urlSearchParams.entries () returns an iterative protocol iterator, so we need to use the Object.fromEntries () method to convert the list of key-value pairs into an object.

For iterative protocols, please refer to the official website: iterative protocols.

Achieve results:

Compatibility:

You can see that our interface is not compatible with the IE of the source of all evils.

Attached: get the instance getUrlParamValue = function (name) {if (name = = null | | name = = 'undefined') {return null;} var searchStr = decodeURI (location.search); var infoIndex = searchStr.indexOf (name + "="); if (infoIndex = =-1) {return null;} var searchInfo = searchStr.substring (infoIndex + name.length + 1); var tagIndex = searchInfo.indexOf ("&"); if (tagIndex! =-1) {searchInfo = searchInfo.substring (0, tagIndex);} return searchInfo;}; this is the end of the article on "how to use native JS to obtain URL link parameters". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.