用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   

相关文章

  • 如何基于小程序实现发送语音消息及转文字功能

    如何基于小程序实现发送语音消息及转文字功能

    最近为小程序增加语音识别转文字的功能,坑路不断,特此记录,下面这篇文章主要给大家介绍了关于如何基于小程序实现发送语音消息及转文字功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • TypeScript语法详解之类型操作的补充

    TypeScript语法详解之类型操作的补充

    TypeScript最大的一个特点就是变量是强类型的,也就是说在声明变量的时候我们必须给他一个类型,下面这篇文章主要给大家介绍了关于TypeScript语法详解之类型操作的补充,需要的朋友可以参考下
    2022-08-08
  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    今天小编就为大家分享一篇解决Layui选择全部,换页checkbox复选框重新勾选的问题方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 原生js实现瀑布流布局

    原生js实现瀑布流布局

    这篇文章主要为大家详细介绍了原生js实现瀑布流布局的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 微信小程序实现换肤功能

    微信小程序实现换肤功能

    这篇文章主要为大家详细介绍了微信小程序实现换肤功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • 根据出生日期自动取得星座的js代码

    根据出生日期自动取得星座的js代码

    最近这个项目需要注册时用户填写出生日期,然后自动取得星座,想想好像用后台代码太麻烦只好转而使用JavaScript。
    2010-07-07
  • 深入理解JavaScript函数参数(推荐)

    深入理解JavaScript函数参数(推荐)

    这篇文章主要介绍了深入理解JavaScript函数参数(推荐)的相关资料,需要的朋友可以参考下
    2016-07-07
  • javascript 使用sleep函数的常见方法详解

    javascript 使用sleep函数的常见方法详解

    这篇文章主要介绍了javascript 使用sleep函数的常见方法,结合实例形式分析总结了javascript sleep函数的功能、常见使用方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS逆向之浏览器补环境图文详解

    JS逆向之浏览器补环境图文详解

    平时JavaScript逆向需要补环境或者补一些函数,下面这篇文章主要给大家介绍了关于JS逆向之浏览器补环境的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • javascript concat数组累加 示例

    javascript concat数组累加 示例

    javascript concat数组累加使用实例。
    2009-09-09

最新评论