用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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js操作iframe父子窗体示例
May 22 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
9种方法优化jQuery代码详解
Feb 04 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
python生成日历实例解析
2014/08/21 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python之指数与E记法的区别详解
2019/11/21 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python 使用office365邮箱的示例
2020/10/29 Python
python opencv实现图像配准与比较
2021/02/09 Python
出纳岗位职责范本
2013/12/01 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
财务稽核岗位职责
2015/04/13 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
教师节校长致辞
2015/07/31 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
python数字图像处理之图像的批量处理
2022/06/28 Python