前端问号参数的获取函数的封装

queryURLParams是项目中一个非常常用的方法,在这里就把这个函数放在string的原型上,供调用此方法。

  • 1.字符串截取处理
String.prototype.queryURLParams = function queryURLParams(attr) {
    let self = this,
        obj = {};
   let askIndex = self.indexOf('?'),
        wellIndex = self.indexOf('#'),
        askText = '',
        wellText = '';
    askIndex === -1 ? askIndex = self.length : null;
    wellIndex === -1 ? wellIndex = self.length : null;
    if (askIndex < wellIndex) {
        askText = self.substring(askIndex + 1, wellIndex);
        wellText = self.substring(wellIndex + 1);
    } else {
        askText = self.substring(askIndex + 1);
        wellText = self.substring(wellIndex + 1, askIndex);
    }
    // 井号获取信息了
    if (wellText) obj['HASH'] = wellText;
    // 问号获取信息了
    if (askText) {
        askText.split('&').forEach(item => {
            let [key, value] = item.split('=');
            obj[key] = value;
        });
    }

    return typeof attr === "undefined" ? obj : (obj[attr] || '');
};

let str = 'http://www.xxx.com/?lx=0&from=weixin&n=100#video';
console.log(str.queryURLParams()); //=>{lx:0,from:'weixin',n:100,HASH:'video'}
console.log(str.queryURLParams('lx')); //=>0
  • 2.利用A元素对象的相关属性「OOP」
String.prototype.queryURLParams = function queryURLParams(attr) {
    // A元素对象:hash/host/hostname/pathname/protocol/search...
    // 基于这些私有属性即可获取到URL中每一部分的信息
    let link = document.createElement('a');
    link.href = self;
    let {
        search,
        hash
    } = link;
    link = null;
    if (hash) obj['HASH'] = hash.substring(1);
    if (search) {
        search.substring(1).split('&').forEach(item => {
            let [key, value] = item.split('=');
            obj[key] = value;
        });
    }

    return typeof attr === "undefined" ? obj : (obj[attr] || '');
};

let str = 'http://www.xxx.com/?lx=0&from=weixin&n=100#video';
console.log(str.queryURLParams()); //=>{lx:0,from:'weixin',n:100,HASH:'video'}
console.log(str.queryURLParams('lx')); //=>0
  • 3.直接正则处理
String.prototype.queryURLParams = function queryURLParams(attr) {
    let reg1 = /([^?&=#]+)=([^?&=#]+)/g,
        reg2 = /#([^?&=#]+)/g;
    self.replace(reg1, (_, key, value) => obj[key] = value);
    self.replace(reg2, (_, hash) => obj['HASH'] = hash);

    return typeof attr === "undefined" ? obj : (obj[attr] || '');
};

let str = 'http://www.xxx.com/?lx=0&from=weixin&n=100#video';
console.log(str.queryURLParams()); //=>{lx:0,from:'weixin',n:100,HASH:'video'}
console.log(str.queryURLParams('lx')); //=>0
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript ECMAScript(ES):规定了一些基础核心的知识(变量、数据类型、语法规范、操作语句等...
    小K强阅读 528评论 0 0
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 34,741评论 18 399
  • JavaScript 浏览器的内核 谷歌浏览器 Webkit内核(v8引擎)Blink火狐浏览器 Gecko内核欧...
    壞忎阅读 328评论 0 0
  • 本文将从以下十一个维度为读者总结前端基础知识 JS基础 如何在ES5环境下实现let对于这个问题,我们可以直接查看...
    WEB前端含光阅读 1,106评论 1 16
  • 0 介绍 0.1 ECMAScript ECMA-262 的第 5 版是 JS 的第一个稳定版本,得到了各浏览器厂...
    前端泥瓦匠阅读 488评论 0 0

友情链接更多精彩内容