jQuery.mobile.path.parseUrl()

Categories: Methods

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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!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.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.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:password@mycompany.com: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:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread#msg-content
    //  obj.hrefNoHash:   http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread
    //  obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
    //  obj.domain:       http://jblas:password@mycompany.com:8080
    //  obj.protocol:     http:
    //  obj.authority:    jblas:password@mycompany.com: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&amp;type=unread
    //  obj.hash:         #msg-content</strong>
 
    var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content");
    var myChoice = eval( this.value );
 
    $( "#myResult" ).html( myChoice );
 })
});
</script>
 
</body>
</html>

Demo: