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

正则表达式的书写是因人而异的，以上只是一个雏形，有兴趣的朋友可以进行扩展优化。欢迎大家发表各自的意见，多多交流，共同进步！