uri.js的用法事例
来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/
Get or Set Query String Values from URL using URI.js
URI.js is a mature javascript library for manipulation of URI. URI.js provides methods to get or set query string values using javascript functions on browsers.
Download URI.js or URI.min.js from Official URI.js Github Repository or build it from Here. Add it into your html page for using it in your script.
function to get Query String value from URL using URI.js
<script type="text/javascript" src="/js/URI.js"></script>
function getQueryStringValue(queryParam){
// Get current URL.
var currentURL = new URI();
// If queryParam is in the querystring of currentURL
if(currentURL.hasQuery(queryParam)){
// Get all querystring values as a json object
var qsValues = currentURL.query(true);
// return queryParam's value
return qsValues[queryParam];
}
else
{
// queryParam is not in the querystring. So return as undefined.
return undefined;
}
}
// If currentURL="http://www.ecommerce.com/product.html?customerId=27" then,
// getQueryStringValue("customerId") returns "27"
// getQueryStringValue("notPresentQueryParam") returns undefined
URI.js Introduction
URI.js offers methods for manipulating URLs. Please see below code to get an intro on few possible operations with URI.js.
// Get current URL from the browser bar.
var url = new URI();
// return http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js
// This is equivalent to window.location.href command in js.
url = new URI("http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html");
// Sets URL to http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html
url;
// return "http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
url.protocol());
// return "http"
url.origin();
// return "http://www.smoothprogramming.com:80"
url.hostname());
// return "www.smoothprogramming.com"
url.host());
// return "www.smoothprogramming.com:80"
url.port());
// return "80"
url.path());
// return "/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
url.directory());
// return "/tutorials"
url.filename());
// return "get-set-query-string-values-from-url-using-uri-js.html"
Get Query String Values
// Querystring values
url = new URI("http://www.ecommerce.com/product.html?customerId=27&checkout=true");
// Get querystring part from URL
url.query();
// returns "customerId=27&checkout=true"
// Get Querystring value as JSON object
url.query(true);
// returns "{"customerId":"27","checkout":"true"}"
//Is customerId in the querystring list ?
url.hasQuery("customerId");
// returns true
//Is dummyQuerystr in the querystring list ?
url.hasQuery("dummyQueryStr");
// returns false
// Is customerId value = 27?
url.hasQuery("customerId", "27");
// returns true
//is customerId value = 50?
url.hasQuery("customerId", "50");
// returns false
Set Query String Values
url = new URI("http://www.ecommerce.com/product.html");
//set customerId as Querystring
url.addQuery("customerId", "27");
//returns "http://www.ecommerce.com/product.html?customerId=27"
//Remove customerId as Querystring
url.removeQuery("customerId");
// returns "http://www.ecommerce.com/product.html"
在线实例:http://codepen.io/hiralbest/pen/kXwPKP
Conclusion
This post has only most useful and important list of methods to manipulate URL using URI.js. If you are interested in detail documentation of all URI.js then, please refer URI.js Documentation Page.
References
uri.js的用法事例的更多相关文章
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- JS 正则表达式用法
JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
- 【JS库】URI.js
做前端的,应该有不少人都写过操作URL的代码,比如提取问号后面的参数.或者主机名什么的,比如这样: var url="http://jszai.com/foo?bar=baz", ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
随机推荐
- "Your computer could not be joined to the domain. You have exceeded the maximum number of computer accounts you are allowed to create in this domain. Contact your system administrator to have this limit reset or increased."
用一个普通的域帐号玩私有云的时候,遇到了如下的报错. "Your computer could not be joined to the domain. You have exceeded ...
- The node (XXX.XXX.XXX.XXX,XXX.XXX.XXX.XXX)has already some ScaleIO components installed
安装ScaleIO 1.32遇到如下报错, 怎么办? 很简单, 在控制面板里把ScaleIO的软件删掉即可.
- 如何让我domain里的机器都跟domain controller的时间保持一致?
貌似是应该先在PDC上设一个时间源服务器, 然后, 再让domain里所有的机器都去与PDC去sync时间即可. 可是笔者的环境里, 怎么都配不同, 我觉得可能是实验室的网络有什么特别的设置吧. 不管 ...
- 用Visual C#来清空回收站(1)
视窗操作系统的回收站是对文件一种保护措施,他主要是作用是不言而喻的.在新的视窗2000系统之中,当我把文件删除到回收站中以后,按动"清空回收站"按钮,想清空回收站,此时往往提示&q ...
- Java:Linux上java -jar xxx.jar&java -cp 区别
java -cp java -cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库和jar包,需要全路径到jar包,多个jar包之间连接符:window上分号“;”.Lin ...
- 如何查看自己电脑系统的安装日期-Window上
开始 > 运行(快捷键 Win+R)->敲入 systeminfo | find “初始安装日期”
- AOP在大规模软件开发项目中的应用(图)
AOP在大规模软件开发项目中的应用(图) 本文的写作源于一个真实的大型软件开发项目,我们努力尝试在这个项目中推广应用AOP.在此我们将对曾经面临过的一些实际问题与困难进行分析,试图引发关于面向方面软件 ...
- [Functional Programming + React] Provide a reasonable default value for mapStateToProps in case initial state is undefined
For example we have a component, it needs to call 'react-redux' connect function. import { compose, ...
- Mybatis之使用注解开发CRUD
上一篇演示了怎样使用XML来操作Mybatis实现CRUD,可是大量的XML配置文件的编写是很烦人的.因此 Mybatis也提供了基于注解的配置方式,以下我们来演示一下使用接口加注解来实现CRUD的的 ...
- 程序员需要经纪人吗?10x 最好的程序员其生产力相当于同行的 10 倍~
原文地址 10x 起源于技术界一个流行的说法,即最好的程序员是超级明星,其生产力相当于同行的 10 倍: Google 园区以好玩的设施闻名:小憩舱.球坑.按摩.干洗.随便吃到饱的自助餐.(为了拍人才 ...