js获取地址栏中的参数

大家用浏览器的时候,都对地址栏很了解吧。只要在地址栏输入一段网址,就能神奇地打开一个网站。但是这网址后面经常有个问号,后面跟了一串参数,这些参数用PHP的话很容易就能得到,用_GET即可。但是,如果是javascript呢,如何做到?

地址栏里的地址,是URL

平时在地址栏输入的网页地址,其实是URL,学名为统一资源定位符。可以通过他,确定互联网中的任意一个文件,没错,是任意一个。具体分为以下部分:

  • url格式名(协议名)
    这一段描述了该url遵从哪种格式(协议),通常来说可以算是协议,比如常见的http:和ftp:算是协议,但是mailto:和file:这种呢,还能算是协议吗。url格式名的最后,还跟有一个冒号,表示结束。
  • 主机名(域名 / ip地址)
    有没有想过,是先有互联网,还是先有域名呢。这明摆着是先有互联网,在有域名服务之前,所有人只能用ip地址来访问网站,这多蛋疼啊。主机名这一段既可以用域名,也可以用ip。主机名以//为开头,当然后面有个可选的端口名,默认由url格式决定。
  • 路径
    以/开始,表示资源在主机中的哪个位置。
  • 可选项,查询
    由?开头,作用是承载那些,用来定位资源的其他附加信息。
  • 可选项,段落
    由#开头,表示在资源中的具体位置。
    这次我们的命题,主要是解决查询这段的内容。

正题,获取查询参数

  1. 首先要从地址栏中把url给扒下来。
    window.location
    使用dom中的window对象即可获得url。这里的url包含上一段中描述的所有内容。
    使用window.location.search即可获取查询段。

  2. 根据键查询
    查询段里的数据都是按键值对形式表示的,以&为分隔符。设想过用string.split函数,按&分开,但是不对啊,最前面还有个问号,每对键值对之间还有个等号,多麻烦。
    遇事不决用正则,你要搜索,用正则就是最快的方式了。分析一下,如果把前面的?去掉,那么每个键值对以&开头或结束,或是什么都没有,这样就得出了正则表达式(^|&)key([^&]*)(&|$)

  3. 获取值
    从之前的正则表达式中,已经能根据键,获取key=value的形式了,那么,怎么拿到value呢。js的正则表达式太神奇了,你的正则表达式中有一个括号,他就会多返回一个结果。这里,我们的value在第二个括号中,也就是第三个结果,只要访问结果的第三个元素即可。

分享到 评论