用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 相关文章推荐
js post提交调用方法
Feb 12 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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二维数组转成字符串示例
2014/02/17 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js倒计时小程序
2013/11/05 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
python 图片验证码代码
2008/12/07 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
STP的判定过程
2012/10/01 面试题
网游商务专员求职信
2013/10/15 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
初中生毕业评语
2014/12/29 职场文书
班主任工作总结范文
2015/08/13 职场文书
心理学培训心得体会
2016/01/22 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js
Oracle使用别名的好处
2022/04/19 Oracle