用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 相关文章推荐
jquery中.add()的使用分析
Apr 26 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php读取3389的脚本
2014/05/06 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
详解vue 组件的实现原理
2020/11/12 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Django自定义manage命令实例代码
2018/02/11 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python爬虫---requests库的用法详解
2020/09/28 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
联想C++笔试题
2012/06/13 面试题
金融专业个人的自我评价
2013/10/18 职场文书
留守儿童工作方案
2014/06/02 职场文书
体育节口号
2014/06/19 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
Echarts如何重新渲染实例详解
2022/05/30 Javascript