如何使用js读取所有的url参数？

Question

有没有办法读取url参数？

www.example.com/detail?id=12
www.example.com/detail/12

返回12...

我不知道参数是什么，我想要全部返回。

- nope123

---

从当前URL还是从字符串中获取？ - str

从一个字符串开始... - nope123

var url = new URL(yourUrlString); url.searchParams 包含许多方法，您可以使用这些方法获取所有参数或特定参数。 如果您希望在较低版本的IE中支持此功能，可以使用polyfills。 - G_S

Answer 1

您可以使用window.location.href来获取带有参数的URL。

要在第二个示例（www.example.com/detail/12）中访问id参数

var url = window.location.href;
return url.substring(url.lastIndexOf('/')+1);

如果您不需要在Internet Explorer中使用它，您也可以实现URLSearchParams，它允许您定义一个URL对象并直接从中检索参数：

来自https://developer.mozilla.org的示例：

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

- Daniel

---

你可以使用这段代码从URL中获取搜索参数：let params = new URLSearchParams(document.location.search); - undefined

Answer 2

1.使用location.href获取所有URL。

2.查找?字符并分离域名和参数。

3.对于每个分离的=字符，您将获得所有参数值。

var url = location.href;

if(url.indexOf('?')!=-1)
{
    var ary = url.split('?')[1].split('&');

    for(i=0;i<=ary.length-1;i++)
    {
       //val is parameter
       var val = ary[i].split('=')[1];
       //alret(val);     
    }
    
}

- D-Shih

---

你如何获取“运行代码片段”和“复制代码片段以回答”按钮？ - Urasquirrel

@Urasquirrel，如果你在答案区按下 ctrl + M，你就会看到代码片段 :). 运行代码和复制片段将由系统自动生成。 - D-Shih

谢谢，伙计！感激不尽！ - Urasquirrel

Answer 3

你可以将所有参数一起作为一个对象获取，如下所示。

const urlParams = new URLSearchParams('?one=1&two=2');
const params = Object.fromEntries(urlParams.entries());
console.log(params) // {one: '1', two: '2'}

- AndreasT

Answer 4

有几种方法可以做到这一点。如果您正在使用框架或任何库，则可能提供更优雅的方法来执行此操作，但是手动方式：

1. 正则表达式。如果每个人都熟悉它们，我可能会推荐这种方法，这种方法可能会更加神秘，但性能更好。
2. 将字符串视为数组。在?索引之后，获取由“/”和&分隔的索引。

    log = (...x) => console.log(...x);
    const url_2 = "www.example.com/detail/12";
    const url_1 = "www.example.com/detail?id=12&thing=blue&sky=red";
    
    const splits2 = url_2.split("/");
    log(splits2); // [ "www.example.com", "detail", "12"]
    log(splits2[splits2.length-1]); // 12
    
    const splitbyquestionmark = url_1.split("?");
    log("splitbyquestionmark", splitbyquestionmark); // ["www.example.com/detail", "id=12&thing=blue&sky=red"]
    const parameters = splitbyquestionmark.splice(splitbyquestionmark.length-1, 1); //["id=12&thing=blue&sky=red"]
    const paramsAsString = parameters[0]; // id=12&thing=blue&sky=red
    const finalParams = paramsAsString.split("&");
    log(finalParams) //["id=12", "thing=blue", "sky=red"]

- Urasquirrel

Answer 5

var url_string = "http://www.example.com/detail?id=12";//www.example.com/detail/12";
var url = new URL(url_string);
var id = url.searchParams.get("id");
alert(id);

或者尝试这个：

function getParam( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
alert(getParam('id', 'http://www.example.com/detail?id=12'))

- Sreekanth Reddy Balne

---

这在任何版本的Internet Explorer中都不起作用。 - Daniel

Answer 6

你可以使用Web API，并访问window.location。

窗口位置

- RoboBear

Answer 7

你可以获取 GET 参数字符串并像这样解析它，首先将其转换为数组，然后从该数组构建一个对象，该对象将使您能够访问项目：

const GETstring = window.location.search.subst(1);

let GETarray = GETstring.split("=");
let GETobject = {};

for(i=0;i<GETarray.length;i++){
    if(i%2 === 0)}{
        GETobject[GETarray[i]] = GETobject[i+1];
    }
}

console.log(GETobject.id) // should print 12;

编辑：

Daniel的回答表明URLsearchParams可以为您完成这项工作，因此我认为这是更好的选择。当我写下我的回答时，我还不知道这个功能。

- CodeAt30