用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 Cookie的读取和写入函数
Dec 08 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
Javascript中的数学函数
2007/04/04 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python Kmeans算法原理深入解析
2019/08/23 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
学校花圃的标语
2014/06/18 职场文书
普通党员对照检查材料
2014/08/28 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书