用javascript替换URL中的参数值示例代码

 更新时间:2014年01月27日 10:18:19   作者:  
本篇文章主要是对用javascript替换URL中的参数值示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
今天遇到一个需要用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   

相关文章

  • js判断某个方法是否存在实例代码

    js判断某个方法是否存在实例代码

    这篇文章主要介绍了js判断某个方法是否存在的实例代码,可用于检测js中的方法是否可用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • javascript鼠标右键菜单自定义效果

    javascript鼠标右键菜单自定义效果

    设计专属于自己的右键菜单,添加自己需要的快捷方式,本文就为大家分享自定义javascript鼠标右键菜单的实现方法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支

    JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支

    这篇文章主要介绍了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支,结合实例形式总结分析了JS页面加载事件,数组操作,DOM节点操作,循环和分支所涉及的相关事件、函数及操作注意事项,需要的朋友可以参考下
    2019-07-07
  • js实现轮播图特效

    js实现轮播图特效

    这篇文章主要为大家详细介绍了js实现轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • javascript中定义变量const和var有什么区别详解

    javascript中定义变量const和var有什么区别详解

    这篇文章主要给大家介绍了关于javascript中定义变量const和var有什么区别的相关资料,在JavaScript中var和const都是用于声明变量的关键字,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Javascript编写2048小游戏

    Javascript编写2048小游戏

    本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码,有需要的小伙伴可以参考下。
    2015-07-07
  • 一文教会你从零开始画echarts地图

    一文教会你从零开始画echarts地图

    ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了如何从零开始画echarts地图的相关资料,需要的朋友可以参考下
    2022-04-04
  • JS如何根据条件取出数组中对应项

    JS如何根据条件取出数组中对应项

    这篇文章主要介绍了JS根据条件取出数组中对应项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • JavaScript实现打开链接页面的方式汇总

    JavaScript实现打开链接页面的方式汇总

    这篇文章主要介绍了JavaScript实现打开链接页面的方式,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 优化javascript的执行速度

    优化javascript的执行速度

    这个是我在网上找的资料,具体的出处,我已经记不清楚了,觉得很不错,就和大家分享了
    2010-01-01

最新评论