黄兵的个人博客

Javascript url 查找参数值

最近需要使用javascript获得url的参数值（javascript url parameters），url结构如下：

http://www.materialtools.com/manage/material_property_value?pro_id=2&classification_id=8&item_id=6

原来需要查询url的参数值写法如下：

function get_url_param() {
    var get_item_str = location.search;
    var get_item_length = get_item_str.length;
    var get_item_index = get_item_str.indexOf('item_id=')
    var get_item_id = get_item_str.substr(get_item_index + 'item_id='.length, get_item_length)
    if (get_item_id === null) {
        return false;
    } else {
        return get_item_id;
    }
}

但是参数变多了查询起来很麻烦。找了一下简单方法，这个问题终于解决了。

Javascript本身并没有内置处理查询url字符串参数的方法，但是现代浏览器可以使用URLSearchParams。

function get_url_param() {
    var url_string=window.location.href;
    var url=new URL(url_string);
    var get_item_id=url.searchParams.get("item_id");
    if (get_item_id === null) {
        return false;
    } else {
        return get_item_id;
    }
}

这样方便多了，多参数也很容易查询。 

如果浏览器不支持，可以使用下面的方法改写：

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

之后查询写法如下：

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

最后看看查询结果截图：

参考资料：

1、MDN web docs - URLSearchParams

2、How to get the value from the GET parameters?

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Javascript url 查找参数值