zoukankan      html  css  js  c++  java
  • JS获取URL的参数

    用JS来获取地址栏(URL)里面的参数

    首先,我们要先获取地址栏里的内容。这里就要用到location对象。

      location最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息。并且还将URL解析为独立的片段,我们可以通过不同的属性来访问这些片段。

    location属性:  例如:https://wwww.maidp.com/index.html?value=12&name="jack"&id=5#imhere

    属性名 说明 举例
    protocol 返回页面所使用的协议  常为http或https "https:"
    hostname 返回服务器名称(不带端口号) "www.maidq.com"
    port 返回端口号(如果使用默认端口80则返回空字符串,否则返回端口号) ""
    host 返回服务器名称和端口号 "www.maidq.com"
    search 返回URL中的参数 "?value=12&name="jack"&id=5"
    href 返回当前加载页面的完整的URL。location对象的toString()方法也返回这个值 "https://wwww.maidp.com/index.html?value=12&name="jack"&id=5#imhere"
    pathname 返回URL中的目录、文件名,路径部分 "/fisker/post/0703/window.location.html"
    hash 返回URL中的hash(#号后跟0个或多个字符),如果URL中不包含散列,则返回空字符串 "#imhere"

    下来咱们就来实现用原生JS获取地址栏里面的参数吧。

    方法一:运用字符串方法来获取URL中的参数

    function getURLParm(){
        var parm = location.href;//获取当前页面的URL
        var parm_result = new Object;//用于存储参数
        var start = parm.indexOf("?") != -1 ? parm.indexOf("?")+1 : parm.length;//判断是否有参数
        var end = parm.indexOf("#") != -1 ? parm.indexOf("#") : parm.length;//判断参数内容结束的地方
        parm = parm.substring(start,end);//将参数部分截取出来
        parm_array = parm.split("&");//将每个参数依次存入数组
        for(var i = 0;i < parm_array.length;i++)
        {
            parm_result[parm_array[i].split("=")[0]] = parm_array[i].split("=")[1];//遍历数组,将参数值赋给相应的参数名
        }
        return parm_result;
    }
    console.log(getURLParm());

     方法二:运用正则表达式来匹配URL中的参数

    function getURLParm(){
        var parm = location.search;//获取当前页面的URL中的参数部分
        var parm_result;//用于存储参数
        var re = new RegExp('"(^|&)" + name + "+([^&*])(&|$)" ');//三个子项:第一个:匹配一个&或者开始位置,第二个:匹配参数值;第三个:匹配结束或&
        parm_result = parm.match(re);//match返回匹配结果数组
        return result = parm_result != null ? parm_result[2]:null;
    }
    console.log(getURLParm(name));
  • 相关阅读:
    KINavigationController使用演示例子
    基于STC12C5A的MINI3216多功能点阵时钟
    Android开发SDK接入机智云,智能家居实现APP远程控制多设备
    自定义通用dialogFragment
    获取取并下载tuku的漫画的爬虫
    Mvp快速搭建商城购物车模块
    仿360手机助手下载按钮
    Pythond 读写HDF5文件
    python tricks —— datetime 删除日期中的前导 0
    天文网站
  • 原文地址:https://www.cnblogs.com/cencenyue/p/7594671.html
Copyright © 2011-2022 走看看