用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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
js 内存释放问题
Apr 25 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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处理Oracle的CLOB实例
2014/11/03 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php连接mysql数据库
2017/03/21 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python绘制热力图heatmap
2020/03/23 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python 获取字典键值对的实现
2020/11/12 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
会计系个人求职信范文分享
2013/12/20 职场文书
开办饭店创业计划书
2013/12/28 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
土地转让协议书
2014/04/15 职场文书
基层党员对照检查材料
2014/09/24 职场文书
个性与发展自我评价
2015/03/06 职场文书
社区党员干部承诺书
2015/05/04 职场文书
党员进社区活动总结
2015/05/07 职场文书
退货证明模板
2015/06/23 职场文书
优秀创业计划书分享
2019/07/19 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android