用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 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
原生js简单实现放大镜特效
May 16 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
jQuery中DOM操作原则实例分析
Aug 01 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
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
子页向父页传值示例
2013/11/27 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python变量和字符串详解
2017/04/29 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
教师简历自我评价
2014/02/03 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
社区居务公开实施方案
2014/03/27 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
2016年端午节寄语
2015/12/04 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android