用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 面向对象的之私有成员和公开成员
May 04 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
vue.js的提示组件
2017/03/02 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python实现自动发送邮件功能
2021/03/02 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Django返回HTML文件的实现方法
2020/09/17 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
十岁生日父母答谢词
2014/01/18 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
负责培养人意见
2015/06/05 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android