I have seen several interview questions recently, one of which is about writing a method to get the field contents of the URL query section of the browser address bar. Although I have seen the related things before, but feel a little vague, so it is a comprehensive study again, I would like to write this article!
Prepare knowledge
In JavaScript, when it comes to URLs (which are simply described here), it's definitely about the location object:
The ①location object is a property of the Window object that can be accessed through window.location (because window is a global object, so you can use location directly to refer to the Location object);
The ②location object contains information about the current URL.
Eight properties of a location object:
Property |
Describe |
Hash |
Sets or returns the URL (anchor) starting with the pound sign (#) |
Host |
Sets or returns the host name and port number of the current URL |
Hostname |
Sets or returns the host name of the current URL |
Href |
Sets or returns the full URL |
Pathname |
Sets or returns the path portion of the current URL |
Port |
Sets or returns the port number of the current URL |
Protocol |
Sets or returns the protocol for the current URL |
Search |
Sets or returns the question mark (? ) Start URL (query section) |
There is also a property, the name is origin, it is defined as: Protocol + hostname (domain name) + port number (ie does not support this property, I see the internet not on school, but Chrome and FF don't know if it's standard. Here are the actual values for each property (under Chrome):
Because this URL uses the default browser port of 80, the function port number is replaced with an empty string.
Three methods of the Location object:
Property |
Describe |
Assign (Newurl) |
Loading a new document will place the current document address and the new document address in the history |
Reload (Force) |
Reload the current document: ① If the method does not have a parameter set, or if the parameter is False, it uses the HTTP header if-modified-since to detect whether the document on the server has changed. If the document has changed, reload () will download the document again. If the document does not change, the method will load the document from the cache. This is exactly the same as when the user clicks the browser's refresh button; ② If the parameter of the method is set to true, it bypasses the cache and re-downloads the document from the server, regardless of the last modification date of the document. This is exactly the same as when the user presses the refresh button of the browser while holding down shift. |
Replace (Newurl) |
Replaces the current document with a new document, but the current document address is removed from the history |
Get URL parameters
The above review the Location object, the following starts to say the point. Get the URL parameter, at first I was to put all the information of the parameters into an object and then return this object, implemented as follows:
functiongeturlsearchobj (URL) {varresult = {}; varSearchindex = Url.indexof ('? ')); varHashindex = Url.indexof (' # ') ===-1?url.length:url.indexof (' # ')); varSearchstr = Url.slice (searchindex+1, Hashindex); varSearcharr = Searchstr.split (' & ')); for(vari=0;i<searcharr.length;i++){ varElearr = searcharr[i].split (' = ')); result[elearr[0]] = elearr[1]; } returnresult;}
Of course, most of the actual project is based on a parameter name to get the value of the parameter in the current URL, implemented as follows:
function getsearchstring (name) { varnew RegExp ("(^|&)" + name + "= ([^&]*) (&|$)" ); var result = Window.location.search.substr (1). Match (reg); if NULL ) { return result[2]; } Else { returnnull; }}
JavaScript learn to get URL parameters