小记--获取url键值

galaxy_robot 发布于2019-08-21 17:58 / 1928人阅读

摘要：以后会不定期把项目中用到的也是我们平时开发常用的一些方法贴出来，也是一个自我总结的过程获取键值是我们在项目会经常遇到的需求。

以后会不定期把项目中用到的也是我们平时开发常用的一些方法贴出来，也是一个自我总结的过程

获取url键值是我们在项目会经常遇到的需求。下面是我在项目中封装的方法，详细的说明在代码都有注释。

/**
 * 获取url键值
 * url => [href] | [param]
 * 不填参数则返回JSON 格式所有数据
 */
const urlCodeToObj = url => {
    let u = url || window.location.href
    //判断url是完整的链接还是传入的参数
    if (RegExp(/^((https|http)?://)/).test(u)) {
        //将url中的空格去掉并匹配"?"后面的参数字符串集合
        const search = u.replace(/^s+|s+$/, "").match(/([^?#]*)(#.*)?$/)
        if (!search) {
            search = {}
        }
        //把匹配到的字符串以"&"分割变换成数组形式
        let searchHash = search[1].split("&");
        let paramObj = {} //键值对对象集合
        for (let item of searchHash) {
            const pair = item.split("=")
            if (pair[0]) {
                const key = decodeURIComponent(pair[0])
                const value = pair[1]
                if (value != undefined) {
                    value = decodeURIComponent(value)
                }
            }
            //判断转化后的paramObj里面有没有重复的属性
            if (key in paramObj) {
                if (paramObj[key] instanceof Array) {
                    //把属性值变为数组，将另外的属性值也存放到数组中去
                    paramObj[key] = [paramObj[key]]
                }
                paramObj[key].push(value)
            } else {
                paramObj[key] = value
            }
        }
        return paramObj
    } else {
        //返回单个属性值 string
        if (RegExp(/^w+/).test(u)) {
             //匹配属性值,比如http://xxx.com/web/page/prodetail.html?num=200&productID=4690&id=100
             //输入值为 &productID=4690&,然后进行匹配.
            let reg = new RegExp(`(^|&)${u}=([^&]*)(&|$)`,"i")
            const matchArr = window.location.search.substr(1).match(reg)
            if (matchArr != null) return (matchArr[2])
            return null
        }
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90276.html

webpack替代fekit的折腾小记

摘要：添加依赖到如何使用依赖当你再兴建一个文件的时候，就不需要一个个插件安装了，将文件复制到当前文件下，并输入，即通过里的依赖关系，自动把依赖安装好了。第四步新建配置文件默认的配置文件在项目目录下为。 WilsonLius blog 首发地址前言早就想尝试webpack的，却一直没有时间，恰逢周末，又时值最近在公司实习的时候尝到用fekit做模块化的构建工具的爽。所以就开始以公司的项目结...

curried 2019-08-19 17:27 评论0 收藏0
知识点小记

摘要：箭头函数我们来看一下箭头函数的效果箭头函数是无法通过来修改作用域的这个需要切记。所以切记在需要的时候使用箭头函数。这是一些小问题的记录和总结： 1. vue serve和build 在vue-cli3.0中可以快速的开发原型。通过全局安全@vue/cli-service-global npm i -g @vue/cli-service-global 那么就可以使用vue serve ...

shery 2019-08-23 16:49 评论0 收藏0
h5唤醒APP小记

摘要：比如联系方式银行卡信用卡信息支付宝各大商城的账户密码照片甚至行程与位置信息等。针对这个问题，苹果使用了名为沙盒的机制应用只能访问它声明可能访问的资源。 h5唤醒APP功能最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个...

KnewOne 2019-08-23 16:25 评论0 收藏0
h5唤醒APP小记

摘要：比如联系方式银行卡信用卡信息支付宝各大商城的账户密码照片甚至行程与位置信息等。针对这个问题，苹果使用了名为沙盒的机制应用只能访问它声明可能访问的资源。 h5唤醒APP功能最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个...

jayzou 2019-08-02 16:09 评论0 收藏0