Preface
First, we need to know what search is. Search is a property of window.location. For example:
First of all, we have a url here, which is http://www.a.com/list/2.html?page=2&color=4&size=3#pic.
When we access this address, open the console, enter window.location, and we will get the result in the following figure
As mentioned above, what we want to operate is the part of the box in the above picture.
Why do you need to operate this?
For example, if I need to jump to the third page on the second page, I need to update the above page=2 to page=3 and ensure that other parameters are retained.
Or, there was no search result at first (such as the first page of the general list, there was nothing), but now I need to add page=2.
Next, I need to know which page I am on now, that is, I need to get the value of the page.
So, search is required. Now we are separated from the front and back ends, search is a very important method for parameter configuration.
Construction method
Get a parameter value specified in search
Take Baidu and we found the following method:
function GetQueryString(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r!=null)return unescape(r[2]); return null;}Method source: Method to obtain address bar parameters using JS
Full-function method
I originally wanted to write an implementation idea, but I couldn't remember it for a while, so I directly gave it to the final method:
function funcUrl(name,value,type){var loca = window.location;var baseUrl = type==undefined ? loca.origin + loca.pathname + "?" : "";var query = loca.search.substr(1);// If there is no parameter transmission, return search value does not contain a question mark if (name==undefined) { return query }// If there is no value transmission, return the value of the parameter to be query if (value==undefined){var val = query.match(new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"));return val!=null ? unescape(val[2]) : null;};var url;if (query=="") {// If there is no search value, return the urlurl with the appended parameter = baseUrl + name + "=" + value;}else{// If there is no search value, modify the corresponding value in it and deduplicate it, and finally return urlvar obj = {};var arr = query.split("&");for (var i = 0; i < arr.length; i++) {arr[i] = arr[i].split("=");obj[arr[i][0]] = arr[i][1];};obj[name] = value;url = baseUrl + JSON.stringify(obj).replace(/[/"/{/}]/g,"").replace(//:/g,"=").replace(//,/g,"&");};return url;}How to use
funcUrl() gets the full search value (not including question marks)
funcUrl(name) returns the value of name in url (integrate the previous paragraph of other people's methods)
funcUrl(name,value) Set the value of name in search to value and return the full url
Return content such as http://www.a.com/list/2.html?page=2&color=4&size=3#pic
funcUrl(name,value,type) functions the same as the third item, but this only returns the updated search string
The type here can be any character, such as 1;
Return content example page=2&color=4&size=3;
Generally used to obtain parameters from url and then dock on the interface
summary
I originally wanted to find a ready-made plug-in to use, but it was either too big to understand or not easy to use. Of course, it was mainly because my level was too poor.
So I made a wheel to play with it. Although the code is not elegant enough, it still meets my needs. If you have better suggestions, leave me a message.
In fact, it is mainly used with vue, but there is no VUE content here, so it is not considered a series of tutorials for VUE.
The above is the complete description of some methods and functions of search in JavaScript operation url introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!