用javascript替换URL中的参数值示例代码


Posted in Javascript onJanuary 27, 2014

今天遇到一个需要用javascript将url中的某些参数替换的需求,想起了不久前从网上淘到了一个parseUrl函数,正好可以借此实现,代码整理如下:

//分析url 
function parseURL(url) { 
    var a = document.createElement('a'); 
    a.href = url; 
    return { 
        source: url, 
        protocol: a.protocol.replace(':', ''), 
        host: a.hostname, 
        port: a.port, 
        query: a.search, 
        params: (function () { 
            var ret = {}, 
            seg = a.search.replace(/^\?/, '').split('&'), 
            len = seg.length, i = 0, s; 
            for (; i < len; i++) { 
                if (!seg[i]) { continue; } 
                s = seg[i].split('='); 
                ret[s[0]] = s[1]; 
            } 
            return ret;         })(), 
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1], 
        hash: a.hash.replace('#', ''), 
        path: a.pathname.replace(/^([^\/])/, '/$1'), 
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1], 
        segments: a.pathname.replace(/^\//, '').split('/') 
    }; 
} 
//替换myUrl中的同名参数值 
function replaceUrlParams(myUrl, newParams) { 
    /* 
    for (var x in myUrl.params) { 
        for (var y in newParams) { 
            if (x.toLowerCase() == y.toLowerCase()) { 
                myUrl.params[x] = newParams[y]; 
            } 
        } 
    } 
    */
    for (var x in newParams) { 
        var hasInMyUrlParams = false; 
        for (var y in myUrl.params) { 
            if (x.toLowerCase() == y.toLowerCase()) { 
                myUrl.params[y] = newParams[x]; 
                hasInMyUrlParams = true; 
                break; 
            } 
        } 
        //原来没有的参数则追加 
        if (!hasInMyUrlParams) { 
            myUrl.params[x] = newParams[x]; 
        } 
    } 
    var _result = myUrl.protocol + "://" + myUrl.host + ":" + myUrl.port + myUrl.path + "?"; 
    for (var p in myUrl.params) { 
        _result += (p + "=" + myUrl.params[p] + "&"); 
    } 
    if (_result.substr(_result.length - 1) == "&") { 
        _result = _result.substr(0, _result.length - 1); 
    } 
    if (myUrl.hash != "") { 
        _result += "#" + myUrl.hash; 
    } 
    return _result; 
} 
//辅助输出 
function w(str) { 
    document.write(str + "<BR>"); 
} 
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); 
w("myUrl.file = " + myURL.file)     // = 'index.html'  
w("myUrl.hash = " + myURL.hash)     // = 'top'   
w("myUrl.host = " + myURL.host)     // = 'abc.com' 
w("myUrl.query = " + myURL.query)    // = '?id=255&m=hello' 
w("myUrl.params = " + myURL.params)   // = Object = { id: 255, m: hello }   
w("myUrl.path = " + myURL.path)     // = '/dir/index.html'   
w("myUrl.segments = " + myURL.segments) // = Array = ['dir', 'index.html'] 
w("myUrl.port = " + myURL.port)     // = '8080'   
w("myUrl.protocol = " + myURL.protocol) // = 'http'   
w("myUrl.source = " + myURL.source)   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top' 
var _newUrl = replaceUrlParams(myURL, { id: 101, m: "World", page: 1,"page":2 }); 
w("<BR>新url为:") 
w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top   
Javascript 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 #Javascript
jquery选择器之层级过滤选择器详解
Jan 27 #Javascript
jquery选择器之内容过滤选择器详解
Jan 27 #Javascript
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
jQuery中bind与live的用法及区别小结
Jan 27 #Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
You might like
phpfans留言版用到的install.php
2007/01/04 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python rstrip()方法实例详解
2018/11/11 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python3常见函数range()用法详解
2019/12/30 Python
Django如何使用redis作为缓存
2020/05/21 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
车贷收入证明范本
2014/01/09 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers