用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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
window.location.hash 使用说明
Nov 08 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue 解决IOS10低版本白屏的问题
Nov 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue router的基本使用和配置教程
2018/11/05 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
部队万能检讨书
2014/02/20 职场文书
历史学专业求职信
2014/06/19 职场文书
教师批评与自我批评
2014/10/15 职场文书
横空出世观后感
2015/06/09 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
JVM之方法返回地址详解
2022/02/28 Java/Android