URI.js

+ + + +

URI.js jQuery Plugin

As of version 1.6.0 URI.js offers a simple jQuery integration. For the plugin to work, you need to regularly load URI.js, as well as jquery.URI.js.

URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin

+ +

Accessing the URI Instance

+var $a = $('<a href="http://google.com/hello.html">Demo</a>');
+var uri = $a.uri();
+
+// URI instance and DOMElement are always in sync
+uri.domain() == 'google.com';
+uri.domain('example.org');
+$a.attr('href') == 'http://example.org/hello.html';
+
+// access to href, src and action
+// transparently update the URI instance
+$a.attr('href', '/other.file');
+uri.href() == '/other.file';
+
+// $.fn.uri() passes values to DOM and URI
+$a.uri('/hello/world.html');
+$a.attr('href') == '/hello/world.html';
+uri.href() == '/hello/world.html';

+ +

Accessing URI components

var $a = $('<a href="http://www.google.com/hello.html">Demo</a>');
+
+// read
+$a.attr('uri:domain') == 'google.com';
+
+// write
+$a.attr('uri:domain', 'example.org');
+$a.attr('href') == 'http://www.example.org/hello.html';

+ +

All URI-component accessors (except segment) can be used: + origin, + authority, + directory, + domain, + filename, + fragment, + hash, + host, + hostname, + href, + password, + path, + pathname, + port, + protocol, + query, + scheme, + resource, + search, + subdomain, + suffix, + tld, + username. +

+ +

Selectors

You may find yourself wanting to select all links to a certain file-type or a specific domain. :uri() is a pseudo-class filter that will help you with that:

+<div class="first">
+  <a href="/my.pdf?with=query">PDF</a>
+  <a href="http://google.com/">Google1</a>
+</div>
+<div class="second">
+  <a href="http://www.google.com/">Google2</a>
+  <a href="https://github.com/some/directory/help.html">Github</a>
+</div>
+

// finding links to a given file-type
+$('a:uri(suffix = pdf)'); 
+// -> finds PDF
+
+// selecting links to a directory (or child thereof)
+$('a:uri(directory *= /directory/)'); 
+// -> finds Github
+
+// selecting links to google.com
+$('a:uri(domain = google.com)'); 
+// -> finds Google1, Google2
+
+// selecting all relative links
+$('a:uri(is: relative)'); 
+// -> finds PDF
+
+// selecting links regardless of their representation
+$('a:uri(equals: http://github.com/some/other/../directory/help.html)'); 
+// -> finds Github
+
+// finding elements containing a link to github
+$('div').has('a:uri(domain = github)')
+// -> finds div.second
+
+// testing if the protocol matches
+$('a').eq(1).is(':uri(protocol = http)');
+// -> is true
+
+// event delegation
+$(document).on('click', 'a:uri(scheme=javscript)', function(e) {
+  if (!confirm("do you really want to execute this script?\n\n" + this.href)) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+});

+ +

The :uri() pseudo selector

:uri() accepts the following three argument patterns:

+ +

:uri(accessor operator string) to compare a single URI-component
:uri(is: string) to compare against .is()
:uri(equals: string) to compare URLs using .equals()

+ +

Note: It is a good idea to prepend the element(s) you're looking for. a:uri(is: relative) is much faster than :uri(is: relative).

Note: ")" may not be used in your comparison-string, as jQuery (Sizzle, actually) can't handle that properly.

+ +

Comparison Accessors

All URI-component accessors (except segment) can be used: + authority, + directory, + domain, + filename, + fragment, + hash, + host, + hostname, + href, + password, + path, + pathname, + port, + protocol, + query, + scheme, + resource, + search, + subdomain, + suffix, + tld, + username. +

+ +

Comparison Operators

Comparison operators are derived from CSS attribute match operators:

=: Exact match of accessor and string
^=: accessor begins with string (case-insensitive)
$=: accessor ends with string (case-insensitive)
*=: accessor contains string (case-insensitive)

+ +