用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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
用户的详细注册和判断
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python控制Firefox方法总结
2019/06/03 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python的collections模块真的很好用
2021/03/01 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
应届大学生求职信
2013/12/01 职场文书
自荐信封面
2013/12/04 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
英文投诉信格式
2015/07/03 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Golang bufio详细讲解
2022/04/21 Golang