用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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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的优点与缺点
2013/04/11 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
酒店员工职业生涯规划
2014/02/25 职场文书
大学生求职计划书
2014/04/30 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
跳蚤市场口号
2014/06/13 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年国庆节寄语
2014/09/19 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
股权投资协议书
2016/03/23 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android