用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+css 图片自动缩放自适应大小
Aug 08 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
js创建对象的方法汇总
Jan 07 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 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 读取shell管道传输过来的内容
2010/03/01 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python字符串处理实例详解
2017/05/18 Python
python difflib模块示例讲解
2017/09/13 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python 存取npy格式数据实例
2020/07/01 Python
python实现经纬度采样的示例代码
2020/12/10 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
保密承诺书范文
2014/03/27 职场文书
敬老院活动总结
2014/04/28 职场文书
物流专业求职信
2014/06/30 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
民事起诉书范本
2015/05/19 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Java Socket实现多人聊天系统
2021/07/15 Java/Android
详解redis在微服务领域的贡献
2021/10/16 Redis
Python实现老照片修复之上色小技巧
2021/10/16 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python
mysql全面解析json/数组
2022/07/07 MySQL