{"id":95003,"date":"2011-06-15T15:04:11","date_gmt":"2011-06-15T07:04:11","guid":{"rendered":"\/2011\/06\/15\/JavaScript_GetURL.html"},"modified":"2011-06-15T15:04:11","modified_gmt":"2011-06-15T07:04:11","slug":"javascript_geturl","status":"publish","type":"post","link":"https:\/\/blog.zhenglei.net\/?p=95003","title":{"rendered":"How To Get URL Parts in JavaScript"},"content":{"rendered":"<ul id=\"article_metadata\">\n<li> By <a href=\"http:\/\/www.suite101.com\/profile.cfm\/LeckyT\">Guy Lecky-Thompson, <br \/><\/a><\/li>\n<li>Forward from <a href=\"http:\/\/www.suite101.com\/content\/how-to-get-url-parts-in-javascript-a48335\">http:\/\/www.suite101.com\/content\/how-to-get-url-parts-in-javascript-a48335<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id=\"summary\">This JavaScript Tutorial article explains the Location object, and how  to retrieve the URL from it in several parts, including how to parse,  split, and rebuild URLs.<\/div>\n<p>This JavaScript tutorial article concentrates on:<\/p>\n<ul>\n<li>Obtaining the URL from the window.location object<\/li>\n<li>Changing the current location with window.location.href and window.location.reload<\/li>\n<li>Splitting and rebuilding URLs with Array and String splitting functions<\/li>\n<\/ul>\n<p>The first step is understanding the JavaScript Location object.<\/p>\n<h3 class=\"dynamic\">The Location Object<\/h3>\n<p>This is a JavaScript class that is used to store URLs. It comes with  properties that represent each part of the URL, and can be updated by  changing the <em>href<\/em> property. The key properties that this article deals with are:<\/p>\n<div style=\"overflow: hidden; color: #000000; background-color: transparent; text-align: left; text-decoration: none; border: medium none;\"> <\/p>\n<ul>\n<li>location.href : the full URL<\/li>\n<li>location.protocol, location.host &amp; location.pathname : the parts of the URL<\/li>\n<\/ul>\n<p>In addition there are various methods that<\/p>\n<ul>\n<li>location.reload<\/li>\n<li>location.replace<\/li>\n<\/ul>\n<p>These shall be discussed with reference to the <em>window.location<\/em> object.<\/p>\n<h3 class=\"dynamic\">The window.location Object<\/h3>\n<p>The <em>window.location<\/em> object is the specific object that stores the URL of the currently loaded page. If a JavaScript function changes the <em>window.location.href<\/em> property, then the page should reload with the new location.<\/p>\n<p>However, this may not always be the case, and so the <em>location.reload<\/em> and <em>location.replace<\/em> methods have also been provided in the Location object. These were  introduced in JavaScript 1.2, and give a little more control over the  way that browsing history and current page location URLs are handled. In  some cases it may not be enough to set the <em>window.location.href<\/em>, and so calling <em>window.location.reload<\/em> will force the page to be refreshed.<\/p>\n<div style=\"overflow: hidden; color: #000000; background-color: transparent; text-align: left; text-decoration: none; border: medium none;\">The <em>window.location.replace<\/em> method is used to overwrite the history entry in the browser, for the current page<\/p>\n<div style=\"overflow: hidden; color: #000000; background-color: transparent; text-align: left; text-decoration: none; border: medium none;\"><\/p>\n<h3 class=\"dynamic\">Splitting and Rebuilding URLs<\/h3>\n<p>The URL is stored as the following parts:<\/p>\n<div class=\"CodeSample\">protocol:\/\/host\/pathname<\/div>\n<p>Each part can be accessed using the appropriate property of the Location object:<\/p>\n<ul>\n<li>location.protocol : for web pages, the value <em>http<\/em><\/li>\n<li>location.host : for this site <em>www.suite101.com<\/em><\/li>\n<li>location.pathname : the path to a page i.e. <em>mypages\/page1.html<\/em><\/li>\n<\/ul>\n<p>It is important to note that:<\/p>\n<ul>\n<li>The protocol is store without the <em>:<\/em> or <em>\/\/<\/em> that make up the whole URL<\/li>\n<li>The host will contain a port, where appropriate<\/li>\n<li>the pathname does not contain the leading <em>\/<\/em><\/li>\n<\/ul>\n<p>So, to rebuild a URL based on the above information, code such as the following can be used:<\/p>\n<div class=\"CodeSample\">newURL = window.location.protocol + &#8220;\/\/&#8221; + window.location.host + &#8220;\/&#8221; + window.location.pathname;<\/div>\n<p>This  makes it very easy to create inline links that are context sensitive,  and that refer pages that should exist on the server. For example, a  site might have a tag page that collects all content that has the tag <em>marketing<\/em> associated with it. If the word <em>marketing<\/em> were to appear in a block of text, then JavaScript could be used to  pre-process that block of text, and add a URL based on the current URL,  but containing the reference to the marketing tag page.<\/p>\n<p>One final note is that the pathname will be a \/ separated string,  which can be split into an array of strings using the following code:<\/p>\n<div class=\"CodeSample\">pathArray = window.location.pathname.split( &#8216;\/&#8217; );<\/div>\n<p>Using  this approach, it is easy to rebuild URLs, as each component will be  contained in one array element. Again, however, it is necessary to put  the <em>\/<\/em> back:<\/p>\n<div class=\"CodeSample\">newPathname = &#8220;&#8221;;<br \/> for ( i = 0; i pathArray.length; i++ ) {<br \/> newPathname += &#8220;\/&#8221;;<br \/> newPathname += pathArray[i];<br \/> }<\/div>\n<p>The <a href=\"http:\/\/www.suite101.com\/content\/javascript-split-list-or-string-a46214\">JavaScript Split List or String<\/a> article contains more details about using arrays and strings in this way.<\/p>\n<div style=\"overflow: hidden; color: #000000; background-color: transparent; text-align: left; text-decoration: none; border: medium none;\">Original URL:<\/div>\n<div style=\"overflow: hidden; color: #000000; background-color: transparent; text-align: left; text-decoration: none; border: medium none;\"><a href=\"http:\/\/www.suite101.com\/content\/how-to-get-url-parts-in-javascript-a48335\">http:\/\/www.suite101.com\/content\/how-to-get-url-parts-in-javascript-a48335<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>explains the Location object, and how to retrieve the URL from it <a href=\"https:\/\/blog.zhenglei.net\/?p=95003\">\u7ee7\u7eed\u9605\u8bfb <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[37],"class_list":["post-95003","post","type-post","status-publish","format-standard","hentry","category-html","tag-javascript-2"],"_links":{"self":[{"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=\/wp\/v2\/posts\/95003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95003"}],"version-history":[{"count":0,"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=\/wp\/v2\/posts\/95003\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.zhenglei.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}