正規表示式筆記（四）

ideaspace發表於2015-05-08
原文網址 : https://flycode.co/archives/94348
筆記

打造一個uri解析器

作為一個Web開發工程師，對下面的程式碼應該不會陌生：

$kw = $_GET[`keyword`]; // PHP
String kw = request.getParameter("keyword"); // JSP

對於後端語言，我們可以很方便的獲取到一個url請求中的引數值。但是，在前端工程中需要獲取到url引數的時候，JS 卻是沒有對應的介面。幸運的是，我們可以通過封裝一些字串操作的方法就可以實現。

查詢例子

var str = "http://search.jd.com/search?keyword=ipad%20min3%E4%BF%9D%E6%8A%A4%E5%A5%97&enc=utf-8&qrst=1&rt=1&stop=1&stock=1#filter";

說明

對正規表示式構建可謂是仁者見仁智者見智。所以，100個的程式設計師有100種寫法，筆者這裡只是自圓自說，拋磚引玉。

String.match 方法

基本思路是從目標字串中匹配與 key 對應的引數的值並返回。使用正規表示式匹配，可以省去迴圈。

/**
 * 查詢 url 字串對應的鍵值
 * @param  {[String]} name [鍵值名]
 * @param  {[String]} url  [url字串]
 * @return {[String]}      [對應的值]
 */
var query = function(name,url) {
    var pattern = new RegExp("[\?&#]" + name + "=([^&#]+)","gi");
    var ma = (url || location.search).match(pattern);
    var strArr;

    if (ma && ma.length > 0) {
        strArr = (ma[ma.length-1]).split("=");
        if (strArr && strArr.length > 1) {
            return strArr[1];
        }
        return ``
    }
    return ``;
}

query("keyword",str)

上面的方法基本上能夠滿足日常使用的需求了，再來看看其他方法的實現。

RegExp.exec 方法

每次匹配之後提供的額外資訊，可以更加靈活的操作字串。合理的封裝一些方法和介面暴露，滿足專案的需求。

/**
 * 查詢 url 字串對應鍵值
 * @param url
 * @returns {{get: Function, keys: Function}}
 */
function query(url) {
    if (typeof url !== "string") return;

    var RE_URL   = /([^&=]+?)(?=(=|&|$|#))=([^&$#]*)?/gi;
    var RE_HTTP  = /(https?):///;
    var ma       = null;
    var r        = {}
    var k,v;

    if (url.match(RE_HTTP)) {
        url = url.slice(url.indexOf(`?`)+1)
    } else {
        url = location.search;
    }

    while ((ma = RE_URL.exec(url)) !== null) {
        k = ma[1];
        v = ma[3];
        if (!r[k]) {
            r[k] = v
        }
    }
    return {
        get: function(key) {
            if (r[key]) return r[key];
            return "";
        },
        keys: function() {
            var keys = [];
            if (`keys` in {}) {
                keys = {}.keys(r)
            } else {
                for (var i in r) {
                    keys.push(i)
                }
            }
            return keys;
        }
    }
}

var q = query(str)
q.get("keyword") // ipad%20min3%E4%BF%9D%E6%8A%A4%E5%A5%97
q.keys() // ["keyword", "enc", "qrst", "rt", "stop", "stock"]

正規表示式的書寫是因人而異的，以上只是一個雛形，有興趣的朋友可以進行擴充套件優化。歡迎大家發表各自的意見，多多交流，共同進步！

相關文章