js获取url参数值的几种方式

程序员 2024-9-15 00:02:58 48 0 来自 中国
方法一:采取正则表达式获取地点栏参数 (代码轻巧,重点正则)
function getQueryString(name) {    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    let r = window.location.search.substr(1).match(reg);    if (r != null) {        return unescape(r[2]);    };    return null; }调用方法:
let 参数1 = GetQueryString("参数名1"));
方法二:split拆分法 (代码较复杂,较易明白)
function GetRequest() {   const url = location.search; //获取url中"?"符后的字串   let theRequest = new Object();   if (url.indexOf("?") != -1) {      let str = url.substr(1);      strs = str.split("&");      for(let i = 0; i < strs.length; i ++) {         theRequest[strs.split("=")[0]]=unescape(strs.split("=")[1]);      }   }   return theRequest;}调用方法:
let Request = new Object();
Request = GetRequest();
var 参数1,参数2 ...;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数... = Request['参数...'];
方法三:split拆分法(易于明白,代码中规)
function getQueryVariable(variable){       let query = window.location.search.substring(1);       let vars = query.split("&");       for (let i=0;i<vars.length;i++) {               let pair = vars.split("=");               if(pair[0] == variable){return pair[1];}       }       return(false);}调用方法:
let 参数1 = getQueryVariable("参数名1");
增补URL知识:

示例url = http://www.jianshu.com/search?q=js&page=1&type=note


  • 1、window.location.href(设置或获取整个 URL 为字符串)
    console.log(window.location.href)
    打印效果:http://www.jianshu.com/search?q=123&page=1&type=note
  • 2、window.location.protocol(设置或获取 URL 的协议部分)
    console.log(window.location.protocol)
    打印效果:http:
  • 3、window.location.host(设置或获取 URL 的主机部分)
    console.log(window.location.host)
    打印效果:www.jianshu.com
  • 4、window.location.port(设置或获取与 URL 关联的端标语码)
    console.log(window.location.port)
    打印效果:空字符(如果采取默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)
  • 5、window.location.pathname(设置或获取与 URL 的路径部分(就是文件地点))
    console.log(window.location.pathname)
    打印效果:/search
  • 6、window.location.search(设置或获取 href 属性中跟在问号背面的部分)
    console.log(window.location.search)
    打印效果:?q=123&page=1&type=note
    PS:得到查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来得到信赖应的参数值。
  • 7、window.location.hash(设置或获取 href 属性中在井号“#”背面的分段)
    console.log(window.location.hash)
    打印效果:空字符(由于url中没有)
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-21 20:30, Processed in 0.159765 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表