正則表達式筆記（四）

打造一個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"]

正則表達式的書寫是因人而異的，以上只是一個雛形，有興趣的朋友能夠進行擴展優化。歡迎你們發表各自的意見，多多交流，共同進步！