美文网首页面试那些事
解析location查询字符串

解析location查询字符串

作者: _静夜听雨_ | 来源:发表于2022-02-15 17:38 被阅读0次

location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。虽然 location.search 返回了从问号开始直到 URL 末尾的所有内容,但没有办法逐个访问每个查询参数。 下面的函数解析了查询字符串,并返回一个以每个查询参数为属性的对象:

let getQueryStringArgs = function() {
    // 取得没有开头问号的查询字符串
    let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    // 保存数据的对象 args = {};
    // 把每个参数添加到 args 对象
    for (let item of qs.split("&").map(kv => kv.split("="))) {
        let name = decodeURIComponent(item[0]),
            value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        } 
    }
    return args;
}

这个函数首先删除了查询字符串开头的问号,当然前提是location.search必须有内容。解析后 的参数将被保存到 args 对象,这个对象以字面量形式创建。接着,先把查询字符串按照&分割成数组, 每个元素的形式为 name=value。for 循环迭代这个数组,将每一个元素按照=分割成数组,这个数组 第一项是参数名,第二项是参数值。参数名和参数值在使用 decodeURIComponent()解码后(这是因为 查询字符串通常是被编码后的格式)分别保存在 name 和 value 变量中。最后,name 作为属性而 value 作为该属性的值被添加到 args 对象。这个函数可以像下面这样使用:

let args = getQueryStringArgs();
// 假设查询字符串为?q=javascript&num=10
alert(args["q"]);    // "javascript"
alert(args["num"]);  // "10"

相关文章

  • QueryString参数处理小利器

    querystring(查询字符串) querystring 模块用于解析与格式化 URL 的查询字符串。 使用方...

  • querystring node.js

    querystring 模块 提供用于解析和格式化 URL 查询字符串的实用工具。主要就是用来解析url中查询字符...

  • NODE 构建Web应用

    构建web应用会遇到的问题 请求方法的判断 URL路径的解析 URL中查询字符串的解析 Cookie的解析 表单数...

  • NodeJS 中 querystring.parse() 实现原

    querystring.parse() 能把一个 URL 查询字符串(str)解析成一个键值对的集合。 例子,查询...

  • Elasticsearch-Query string query

    此查询使用语法根据运算符(例如 AND 或 NOT)解析和拆分提供的查询字符串。 查询然后在返回匹配文档之前独立分...

  • Node的QueryString模块

    querystring模块提供了一些实用工具,主要是用来解析和格式化查询字符串。 查询字符串 在一个完整的URL字...

  • 获取当前页面url参数的三种方法

    知识先填坑: location.search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问...

  • Node querystring模块

    前言 querystring模块提供了一些实用工具,主要是用来解析和格式化查询字符串。 查询字符串在一个完整的UR...

  • http

    http状态码 querystring(查询字符串) querystring 模块提供用于解析和格式化 URL 查...

  • querystring模块

    querystring.parse() 方法将 URL 查询字符串 str 解析为键值对的集合。querystri...

网友评论

    本文标题:解析location查询字符串

    本文链接:https://www.haomeiwen.com/subject/qeedlrtx.html