用javascript替换URL中的参数值

简介: 今天遇到一个需要用javascript将url中的某些参数替换的需求,想起了不久前从司徒正美先生的博客中淘到了一个parseUrl函数,正好可以借此实现,代码整理如下: //分析url function parseURL(url) { var a = document.

今天遇到一个需要用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 + "
"); } 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("
新url为:") w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top
目录
相关文章
|
12天前
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
60 3
|
23天前
|
存储 开发框架 JavaScript
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
48 0
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
|
3月前
|
JavaScript 前端开发
js获取url参数值的几种方式
js获取url参数值的几种方式
|
2月前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
2月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
46 0
|
3月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
6月前
|
前端开发 JavaScript
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
|
5月前
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
48 3
|
5月前
|
JavaScript
【干货】js判断url是否是合法http/https
【干货】js判断url是否是合法http/https
|
5月前
|
JavaScript 前端开发 API
详解JS的URL()和URLSearchParams() API接口
详解JS的URL()和URLSearchParams() API接口
110 2