我有一个带有一些GET参数的URL,如下所示:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

我需要得到c的全部值。我试图读取URL,但只得到m2。如何使用JavaScript执行此操作?


当前回答

JavaScript本身没有内置处理查询字符串参数的功能。

在(现代)浏览器中运行的代码可以使用URL对象(Web API)。URL也由Node.js实现:

//如果您想使用,可以从window.location.href获取url_string//当前页面的URLvar url_string=“http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5“;var url=新url(url_string);var c=url.searchParams.get(“c”);控制台日志(c);


对于较旧的浏览器(包括Internet Explorer),可以使用此polyfill。

您还可以对URLSearchParams使用一个,并提取查询字符串,以通过window.location.search.substring(1)传递给它。


您也可以使用URL之前的原始版本的代码。上面的polyfill是健壮的,经过了很好的测试,但我强烈建议使用它。

您可以访问location.search,这将从中提供给您?在URL末尾或片段标识符(#foo)的开头(以先到者为准)添加一个字符。

然后,您可以使用以下命令解析它:

函数parse_query_string(查询){var vars=查询.split(“&”);var query_string={};对于(var i=0;i<vars.length;i++){var pair=vars[i].split(“=”);var key=解码URIComponent(pair.shift());var value=decodeURIComponent(pair.join(“=”));//如果第一个条目具有此名称if(query_string[key]类型==“未定义”){query_string[key]=值;//如果第二个条目具有此名称}否则如果(query_string[key]类型==“string”){var arr=[query_string[key],value];query_string[key]=arr;//如果使用此名称的第三个或更高版本条目}其他{query_string[key].push(值);}}返回query_string;}var query_string=“a=1&b=3&c=m2-m3-m4-5”;var parsed_qs=parse_query_string(query_string);控制台日志(parsed_qs.c);

您可以通过以下方式从当前页面的URL获取查询字符串:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

其他回答

正如在最新浏览器的第一个答案中提到的,我们可以使用新的URL api,然而,获取对象中的所有参数并使用它们的更一致的本地javascript简单解决方案可能是

例如,该类表示locationUtil

const locationSearch = () => window.location.search;
const getParams = () => {
  const usefulSearch = locationSearch().replace('?', '');
  const params = {};
  usefulSearch.split('&').map(p => {
    const searchParam = p.split('=');
    const [key, value] = searchParam;
    params[key] = value;
    return params;
  });
  return params;
};

export const searchParams = getParams();

用法::现在可以在类中导入searchParams对象

url示例---https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true

import { searchParams } from '../somewhere/locationUtil';

const {key1, valid} = searchParams;
if(valid) {
 console.log("Do Something");
 window.location.href = key1;
}

JavaScript本身没有内置处理查询字符串参数的功能。

在(现代)浏览器中运行的代码可以使用URL对象(Web API)。URL也由Node.js实现:

//如果您想使用,可以从window.location.href获取url_string//当前页面的URLvar url_string=“http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5“;var url=新url(url_string);var c=url.searchParams.get(“c”);控制台日志(c);


对于较旧的浏览器(包括Internet Explorer),可以使用此polyfill。

您还可以对URLSearchParams使用一个,并提取查询字符串,以通过window.location.search.substring(1)传递给它。


您也可以使用URL之前的原始版本的代码。上面的polyfill是健壮的,经过了很好的测试,但我强烈建议使用它。

您可以访问location.search,这将从中提供给您?在URL末尾或片段标识符(#foo)的开头(以先到者为准)添加一个字符。

然后,您可以使用以下命令解析它:

函数parse_query_string(查询){var vars=查询.split(“&”);var query_string={};对于(var i=0;i<vars.length;i++){var pair=vars[i].split(“=”);var key=解码URIComponent(pair.shift());var value=decodeURIComponent(pair.join(“=”));//如果第一个条目具有此名称if(query_string[key]类型==“未定义”){query_string[key]=值;//如果第二个条目具有此名称}否则如果(query_string[key]类型==“string”){var arr=[query_string[key],value];query_string[key]=arr;//如果使用此名称的第三个或更高版本条目}其他{query_string[key].push(值);}}返回query_string;}var query_string=“a=1&b=3&c=m2-m3-m4-5”;var parsed_qs=parse_query_string(query_string);控制台日志(parsed_qs.c);

您可以通过以下方式从当前页面的URL获取查询字符串:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

您可以添加一个输入框,然后要求用户将值复制到其中……这非常简单:

<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />

<script>
//...read the value on click

好吧,但说真的。。。我发现了这段代码,它似乎很有用:

http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/

function queryToJSON() {
    var pairs = location.search.slice(1).split('&');

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var query = queryToJSON();

Eldon McGuinness的Gist是迄今为止我见过的JavaScript查询字符串解析器的最完整的实现。

不幸的是,它是作为jQuery插件编写的。

我将其重写为vanilla JS,并做了一些改进:

函数parseQuery(str){var qso={};var qs=(str|| document.location.search);//检查是否有空的查询字符串如果(qs==“”){回归qso;}//规范化查询字符串qs=qs.replace(/(^\?)/,“”).replace(/;/g,“&”);而(qs.indexOf(“&&”)!=-1) {qs=qs.替换(/&&/g,'&');}qs=qs.replace(/([\&]+$)/,“”);//将查询字符串拆分为多个部分qs=qs.拆分(“&”);//生成querystring对象对于(变量i=0;i<qs.length;i++){var qi=qs[i].split(“=”);qi=qi.map(函数(n){返回decodeURIComponent(n)});if(类型qi[1]==“未定义”){qi[1]=空;}if(qso[qi[0]的类型!==“未定义”){//如果键已经存在,则将其设置为对象if(typeof(qso[qi[0])==“string”){var temp=qso[qi[0]];如果(qi[1]==“”){qi[1]=空;}qso[qi[0]]=[];qso[qi[0]].推(温度);qso[qi[0]。push(qi[1]);}否则如果(typeof(qso[qi[0])==“对象”){如果(qi[1]==“”){qi[1]=空;}qso[qi[0]。push(qi[1]);}}其他{//如果没有键,只需将其设置为字符串如果(qi[1]==“”){qi[1]=空;}qso[qi[0]]=qi[1];}}回归qso;}//演示console.log(parseQuery(“?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5 B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2My%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%2A%2F%3F%2Fw3schools2.com%2Fmy%20est.asp%3Fame%3Dst%A5%A5le%26car%3Dsaab”);

另请参见此Fiddle。

下面是一个获取单个参数的简单函数:

function getUrlParam(paramName) {
    var match = window.location.search.match("[?&]" + paramName + "(?:&|$|=([^&]*))");
    return match ? (match[1] ? decodeURIComponent(match[1]) : "") : null;
}

这些特殊情况的处理与URLSearchParams一致:

如果缺少参数,则返回null。如果参数存在但没有“=”(例如“?param”),则返回“”。

笔记如果参数名称可能包含特殊的URL或正则字符(例如,如果它来自用户输入),则需要对其进行转义

function getUrlParamWithSpecialName(paramName) {
    return getUrlParam(encodeURIComponent(paramName).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
}