js获取浏览器URL中查询字符串

迈不过友情╰ 2022-05-28 07:22 227阅读 0赞

看到一个面试题：如何获取浏览器url中查询字符串，呃呃呃，不会，然后赶紧找书、找度娘。嗯，终于懂了，总结一下，大家一起学习，共同进步！

做这道题之前，我们先来了解一下location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是一个很特别的一个对象，因为它既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下面是location对象的所有属性

以http://www.baidu.com:80/news/index.aspx?id=1&name=location\#top为例来说一下每个属性的含义

location.hash  ：返回URL中的hash（\#后面跟0或多个字符），如果URL中不包含散列，则包含空字符串      "\#top"

location.host ：返回服务器名称和端口号（如果有）        "www.baidu.com:80"

location.hostname：返回不带端口号的服务器名称           "www.baidu.com"

location.href：返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值                                         "http://www.baidu.com:80/news/index.aspx?id=1&name=location\#top"

location.pathname：返回url中的目录（或）文件名                   "/news/index.aspx"

location.port：返回url中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串         "80"

location.protocol:返回页面使用的协议。通常是http:或https:                "http:"

location.search：返回URL的查询字符串。这个字符串以问号开头          "?id=1&name=location"

location对象的这些属性都是可读可写的，如果改变了文档的location的属性（hash除外），则浏览器会载入新的页面。如果改变了location.hash，则页面会跳转到新的锚点，但此时页面不会重载

，OK，普及完毕，现在回到面试题，呐，什么是查询字符串？其实就是location对象的search属性的值

先写方法，再解释吧

这个函数的第一步是先去掉查询字符串开头的问号。当然，前提是location.search中必须要包含一个或多个字符。然后，所有参数将被保存在args对象中，该对象以字面量形式创建。接下来，根据&来分割查询字符串，并返回name=value格式的字符串数组。下面的for循环会迭代这个数组，然后根据等号分割每一项，从而返回第一项为参数名，第二项为参数值的数组。再使用decodeURIComponent()分别解码name和value（因为查询字符串应该是被编码过的）。最后，将name作为args对象的属性，将value作为相应属性的值。

文章主要参考《js高级程序设计》，嗯，很不错的一本书