jQuery.mobile.path.parseUrl( Url )Returns: Object
Description: Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy.
-
jQuery.mobile.path.parseUrl( Url )
- UrlType: String
-
Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc). Also, when parsing URLs that have no authority, such as tel: urls, the pathname property of the object will contain the data after the protocol/scheme colon.
This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:
hash- The fragment component of the URL, including the leading '#' character.
host- The host and port number of the URL.
hostname- The name of the host within the URL.
href- The original URL that was parsed.
pathname- The path of the file or directory referenced by the URL.
port- The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.
protocol- The protocol for the URL including the trailing ':' character.
search- The query component of the URL including the leading '?' character.
But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:
authority- The username, password, and host components of the URL
directory- The directory component of the pathname, minus any filename.
domain- The protocol and authority components of the URL.
filename- The filename within the pathname component, minus the directory.
hrefNoHash- The original URL minus the fragment (hash) components.
hrefNoSearch- The original URL minus the query (search) and fragment (hash) components.
password- The password contained within the authority component.
username- The username contained within the authority component.
Example:
Various uses of jQuery.mobile.path.parseUrl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.path.parseUrl demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#myResult{
border: 1px solid;
border-color: #108040;
padding: 10px;
}
</style>
</head>
<body>
<div role="main" class="ui-content">
<p>The URL used is http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content</p>
<input type="button" value="obj.href" id="button1" class="myButton" data-inline="true">
<input type="button" value="obj.hrefNoHash" id="button2" class="myButton" data-inline="true">
<input type="button" value="obj.hrefNoSearch" id="button3" class="myButton" data-inline="true">
<input type="button" value="obj.domain" id="button4" class="myButton" data-inline="true">
<input type="button" value="obj.protocol" id="button5" class="myButton" data-inline="true">
<input type="button" value="obj.authority" id="button6" class="myButton" data-inline="true">
<input type="button" value="obj.username" id="button7" class="myButton" data-inline="true">
<input type="button" value="obj.password" id="button8" class="myButton" data-inline="true">
<input type="button" value="obj.host" id="button9" class="myButton" data-inline="true">
<input type="button" value="obj.hostname" id="button10" class="myButton" data-inline="true">
<input type="button" value="obj.port" id="button11" class="myButton" data-inline="true">
<input type="button" value="obj.pathname" id="button12" class="myButton" data-inline="true">
<input type="button" value="obj.directory" id="button13" class="myButton" data-inline="true">
<input type="button" value="obj.filename" id="button14" class="myButton" data-inline="true">
<input type="button" value="obj.search" id="button15" class="myButton" data-inline="true">
<input type="button" value="obj.hash" id="button16" class="myButton" data-inline="true">
<div id="myResult">The result will be displayed here</div>
</div>
<script>
$(document).ready(function() {
$( ".myButton" ).on( "click", function() {
// Parsing the Url below results an object that is returned with the
// following properties:
//
// obj.href: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content
// obj.hrefNoHash: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread
// obj.hrefNoSearch: http://jblas:[email protected]:8080/mail/inbox
// obj.domain: http://jblas:[email protected]:8080
// obj.protocol: http:
// obj.authority: jblas:[email protected]:8080
// obj.username: jblas
// obj.password: password
// obj.host: mycompany.com:8080
// obj.hostname: mycompany.com
// obj.port: 8080
// obj.pathname: /mail/inbox
// obj.directory: /mail/
// obj.filename: inbox
// obj.search: ?msg=1234&type=unread
// obj.hash: #msg-content</strong>
var obj = $.mobile.path.parseUrl("http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content");
var myChoice = eval( this.value );
$( "#myResult" ).html( myChoice );
})
});
</script>
</body>
</html>