JavaScript learn to get URL parameters

Source: Internet
Author: User

  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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.