jQuery extension which adds lots of helpful tools for manipulation of URLs and hyperlinks
Download the production version or the development version.
Suppose we're on http://www.example.com/path/to/page?foo=bar
<a id="myLink" href="http://www.example.com/path/to/page/?a=foo&b=bar#derp">click here</a>Read componenets (normalised across browsers)
$('#myLink').href('protocol'); // http
$('#myLink').href('host'); // www.example.com
$('#myLink').href('path'); // path/to/page/
$('#myLink').href('query'); // {a:"foo",b:"bar"}
$('#myLink').href('hash'); // derp
$('#myLink').href('href'); // http://www.example.com/path/to/page?a=foo&b=bar#derpWrite components:
$('#myLink').href('protocol','https').href('path','path/to/otherpage/').href('hash',null);or equivalently
$('#myLink').href({protocol:'https', path:'path/to/otherpage/', href:null});href of #myLink is now https://www.example.com/path/to/otherpage/?a=foo&b=bar
Make changes to query string: (changes are merged)
$('#myLink').href('query',{b:"noggin",c:"boggin"});href of #myLink is now https://www.example.com/path/to/otherpage/?a=foo&b=noggin&c=boggin
Replace query string: (as opposed to merge)
$('#myLink').href('query.replace',{q:"Fly Fishing"});href of #myLink is now https://www.example.com/path/to/otherpage/?q=Fly+Fishing
Relative links work too:
If we're on http://www.example.com/egg and have <a id="myLink" href="/bacon">click here</a>
$('#myLink').href('host'); // www.example.com
$('#myLink').href('path'); // bacon2 new jquery selectors
:href-internal - matches links to pages on the same hostname
:href-external - matches links to pages on a different hostname
eg - make all external links open in a new tab:
$('a:external').attr('target','_blank');Use $.href to create elements quickly for further manipluation:
$.href('www.google.com'); // jQuery set containing an <a> element with href www.google.com
$.href(); // jQuery set containing an <a> element with href of the current URL
// start with current URL, change a query param, force protocol to https, and alert the resulting URL
alert($.href().href('query',{foo:'bar'}).href('protocol','https').href('href'));Utility function to get the site homepage:
$.href.home(); // jQuery set containing an <a> element with href of the current URL with the path, query and hash all removedUtility function for comparing links:
If we're on http://www.example.com/egg and have <a id="myLink" href="/bacon">click here</a>
$.href.linkEquals('/toast/','http://www.example.com/toast/'); // true - strings interpreted as links and normalized
$.href.linkEquals('?foo=bar','http://www.example.com/egg/?foo=bar'); // true - strings interpreted as links and normalized
$.href.linkEquals('/bacon/', $('#myLink')); // true - first element of jquery set used, if it's a link
$.href.linkEquals('/bacon/', document.getElementById('myLink')); // true - DOM elements also ok, if it's a link
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent