用户工具

站点工具


urlutil

UrlUtil封装的常用的url集中处理方法

UrlUtil主要是一个常用的url处理方法集合,包含拼装参数,获取参数,删除参数,而url参数包括两种,一种是基本参数,一种是拼装在hash上面的参数(主要是vue,ng等前端框架上使用),这里把这个事情封装成了一个方法,方便调用,自己在项目中也可以使用这种方法:

调用示例

var url = 'https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892';

// 获取url基本部分,即不包括 hash
UrlUtil.getBaseUrl(url)  // https://www.dingsky.com/index.html?version=development&templateId=1

// 获取 url 的基本参数部分
UrlUtil.getSearchFragment(url)  // version=development&templateId=1

// 获取 url 的hash部分
UrlUtil.getHashFragment(url)  // shareCode=2020101523160272892

// 获取url指定的参数
UrlUtil.getQueryVariable(url, 'version') // development

// 获取url hash部分指定的参数
UrlUtil.getHashQueryVariable(url, 'shareCode') // 2020101523160272892

// 格式化拼装Url参数
UrlUtil.format(url, {templateId: 2, a:3, b:4 })  // https://www.dingsky.com/index.html?version=development&templateId=2&a=3&b=4#/order/2020101523114698396940?shareCode=2020101523160272892

// 格式化拼装hash参数Url
UrlUtil.formatHash(url, {templateId: 2, a:3, b:4 })  // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892&templateId=2&a=3&b=4

// 给url插入或者修改参数
UrlUtil.append(url, 'name', 'huihui')  // https://www.dingsky.com/index.html?version=development&templateId=1&name=huihui#/order/2020101523114698396940?shareCode=2020101523160272892

// 给url hash部分插入或者修改参数
UrlUtil.appendHash(url, 'name', 'huihui')  // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892&name=huihui

// 删除url参数
UrlUtil.delete(url, 'templateId')  // https://www.dingsky.com/index.html?version=development#/order/2020101523114698396940?shareCode=2020101523160272892

// 删除url hash部分参数
UrlUtil.deleteHash(url, 'shareCode')  // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940

封装的代码

/**
* 对Url的一些处理方法
*/
export default {
    /**
    * 获取一个 url 的基本部分,即不包括 hash
    * @param {String} url url
    * @returns {String}
    */
    getBaseUrl: function(url) {
        let hashIndex = url.indexOf('#');
        return hashIndex === -1 ? url.slice(0) : url.slice(0, hashIndex);
    },
    /**
    * 获取 url 的 fragment(即 hash 中去掉 # 的剩余部分)
    * @param {String} url url
    * @returns {String}
    */
    getHashFragment: function(url) {
        let hashIndex = url.indexOf('#');
        return hashIndex === -1 ? '' : url.slice(hashIndex + 1);
    },
    getSearchFragment: function(url) {
        let baseUrl = this.getBaseUrl(url);
        let searchIndex = baseUrl.indexOf('?');
        return searchIndex === -1 ? '' : baseUrl.slice(searchIndex + 1);
    },
    /**
    * 传入对象返回url参数
    * @param {Object} options {a:1}
    * @returns {string}
    */
    getParam(fragment = '', options) {
        for (let k in options) {
            let arg = k,
                val = options[k] !== undefined ? options[k] : '';

            let pattern = arg + '=([^&]*)';
            let replaceText = arg + '=' + val;
            fragment = fragment.match(pattern)
                ? fragment.replace(eval('/(' + arg + '=)([^&]*)/gi'), replaceText)
                : fragment.match('[?]')
                ? fragment + '&' + replaceText
                : fragment + '?' + replaceText;
        }
        return fragment;
    },
    /**
    * 删除URL参数
    * @param {*} url
    * @param {*} name
    */
    delParam(url, name) {
        let str = '';
        if (url.indexOf('?') != -1) str = url.substr(url.indexOf('?') + 1);
        else return url;
        let arr = '';
        let returnurl = '';
        if (str.indexOf('&') != -1) {
            arr = str.split('&');
            for (let i in arr) {
                if (arr[i].split('=')[0] != name) {
                    returnurl = returnurl + arr[i].split('=')[0] + '=' + arr[i].split('=')[1] + '&';
                }
            }
            return url.substr(0, url.indexOf('?')) + '?' + returnurl.substr(0, returnurl.length - 1);
        } else {
            arr = str.split('=');
            if (arr[0] == name) return url.substr(0, url.indexOf('?'));
            else return url;
        }
    },
    /**
    * 格式化拼装Url参数
    * @param {*} url
    * @param {*} options
    */
    format: function(url, options) {
        let hash = this.getHashFragment(url);
        let baseUrl = this.getBaseUrl(url);
        console.log(hash);
        return this.getParam(baseUrl, options) + (!hash ? '' : '#' + hash);
    },
    /**
    * 格式化拼装hash参数Url
    * @param {*} url
    * @param {*} options
    */
    formatHash: function(url, options) {
        let hash = this.getHashFragment(url);
        let baseUrl = this.getBaseUrl(url);
        let newHash = this.getParam(hash, options);
        return baseUrl + (newHash ? '#' + newHash : '');
    },
    /**
    * 给url插入或者修改参数
    * @param {*} url
    * @param {*} name
    * @param {*} value
    */
    append(url, name, value) {
        let options = {};
        options[name] = value;
        return this.format(url, options);
    },
    /**
    * 给url hash部分插入或者修改参数
    * @param {*} url
    * @param {*} name
    * @param {*} value
    */
    appendHash(url, name, value) {
        let options = {};
        options[name] = value;
        return this.formatHash(url, options);
    },
    /**
    * 删除url参数
    * @param {*} url
    * @param {*} name
    */
    delete(url, name) {
        let hash = this.getHashFragment(url);
        let baseUrl = this.getBaseUrl(url);
        return this.delParam(baseUrl, name) + (!hash ? '' : '#' + hash);
    },
    /**
    * 删除url hash部分参数
    * @param {*} url
    * @param {*} name
    */
    deleteHash(url, name) {
        let hash = this.getHashFragment(url);
        let baseUrl = this.getBaseUrl(url);
        let newHash = this.delParam(hash, name);
        return baseUrl + (newHash ? '#' + newHash : '');
    },
    /**
    * 获取url指定的参数
    * @param {*} url
    * @param {*} variable
    */
    getQueryVariable(url, variable) {
        var query = this.getSearchFragment(url);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false;
    },
    /**
    * 获取url hash部分指定的参数
    * @param {*} url
    * @param {*} variable
    */
    getHashQueryVariable(url, variable) {
        var query = this.getHashFragment(url);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false;
    },
    /**
    * 把一个字符串的 url 转为一个可获取其 base 和 fragment 等的对象
    *
    * @param {String} url url
    * @returns {UrlObject}
    */
    toUrlObject: function(url) {
        let baseUrl = this.getBaseUrl(url),
            hash = this.getHashFragment(url),
            search = this.getSearchFragment(url);
        return {
            base: baseUrl,
            original: url,
            search: search,
            hash: hash,
        };
    },
};
urlutil.txt · 最后更改: 2021/12/23 17:19 (外部编辑)