用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 创建快捷方式的代码(fso)
Nov 19 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
javascript去除空格方法小结
May 21 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
星际实力自我测试
2020/03/04 星际争霸
php 过滤器实现代码
2010/08/09 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python中enumerate的用法实例解析
2014/08/18 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
幼儿园保育员岗位职责
2014/04/13 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
PHP中strval()函数实例用法
2021/06/07 PHP
配置nginx 重定向到系统维护页面
2021/06/08 Servers
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers