JavaScript URL参数解析与构建函数实现

作者:函数茶馆时间:2026-10-21 23:09:49浏览:491

本文介绍了JavaScript中处理URL查询参数的两个核心函数。通过解析location.search,实现将URL参数转换为对象或数组的parse功能;同时提供build函数,将参数对象重新拼接为标准URL字符串。代码展示了如何处理多值参数及空查询情况,适用于前端开发中的地址栏数据交互场景。

URL参数解析函数实现

首先来看解析部分,该函数旨在从当前页面的URL中提取查询字符串参数。它创建一个空对象用于存储结果,并检查location.search是否为空。若存在查询字符串,则去除开头的问号,按 '&' 分割得到键值对列表,再逐个按 '=' 分割。为了支持同一参数名对应多个值的情况,代码判断参数名是否已在结果对象中,若未定义则初始化为数组,随后将解析出的值推入该数组。最终返回包含所有参数的对象。


function getParam() {
    var param = new Object()
    var item = new Array();
    if (location.search == "") {
      return param;
    };
    var query = location.search.substring(1);                                                                   
    var list = query.split('&');
    for(var i = 0; i < list.length; i++) {
      item = list[i].split('=');
      if (typeof param[item[0]] == "undefined") {
        param[item[0]] = new Array();
      }
      param[item[0]].push(item[1]);
    };
    return param;
  };

URL字符串构建函数实现

接下来是构建部分,该函数负责将参数对象还原为URL查询字符串格式。它遍历传入的参数对象,对于每个字段,再次遍历其对应的值数组(或单个值)。在拼接过程中,为每个参数-值对前添加 '&' 符号。最后,检查生成的字符串是否为空,若非空则去除开头的 '&' 并返回结果,否则返回空字符串。这实现了从结构化数据到标准URL格式的逆向转换。


function getUrlByParam(param) {
    var url = "";
    for (field in param) {
      for (index in param[field]) {
        url += "&" + field + "=" + param[field][index];
      };
    };
    return url == "" ? url : url.substring(1);
  };

上述内容详细展示了JavaScript中处理URL参数的解析与构建逻辑,提供了完整的代码实现参考。希望这些示例能帮助开发者更好地处理前端地址栏数据的获取与生成,欢迎收藏备用。

作者最新文章