用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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
php数据访问之查询关键字
2016/05/09 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS交换变量的方法
2015/01/21 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python字符串连接的N种方式总结
2014/09/17 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
金士达面试非笔试
2012/03/14 面试题
九年级语文教学反思
2014/02/04 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
教师对学生的评语
2014/04/28 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
首都博物馆观后感
2015/06/05 职场文书
python中的装饰器该如何使用
2021/06/18 Python