小記--獲取url鍵值

galaxy_robot 發布于2019-08-21 17:58 / 1949人閱讀

摘要：以后會不定期把項目中用到的也是我們平時開發常用的一些方法貼出來，也是一個自我總結的過程獲取鍵值是我們在項目會經常遇到的需求。

以后會不定期把項目中用到的也是我們平時開發常用的一些方法貼出來，也是一個自我總結的過程

獲取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
        }
    }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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