如何使用 Javascript 获取 URL 参数

  • Post author:
  • Post category:java


JS 获取 URL 参数稍微有点麻烦,因为 JS 只能获取到 URL 的某一部分,但是不能再细分。如果想获取某一项参数,那么还需要使用一下字符串截取。

所以分为两步:

  1. 获取 URL 的参数部分
  2. 截取某一个参数(甚至细分到参数名和参数值)

首先假设 URL 是

https://www.example.com/?keyword=abc&id=12



JS 获取 URL 的参数部分

首先需要使用

new URL()

来创建一个 URL 对象,然后使用

.search

来获取 URL 参数部分。

代码如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>测试</title> 
</head>
<body>

<script>
let url=new URL('https://www.example.com/?keyword=abc&id=12'); /* 创建一个 URL 对象 */
let para = url.search; /* 获取 URL 参数部分 */
document.write(para); /* 显示 a 的内容到屏幕上 */
</script> 

</body>
</html>

显示如下:

请添加图片描述

如果想要了解更多 Javascript 中 URL 相关的信息,可以查看这篇文章,我觉得挺不错的:

https://javascript.info/url

ok接下来就是截取各部分了。



截取 URL 参数

多个 URL 参数通过

&

符号分隔,所以可以利用 JS 的

split()

来分隔。

split()

会将分隔的内容放入一个数组。

但是在使用

split()

之前,需要将参数部分开头的问号

?

先去除,不然分隔的第一个会带着这个问号

?

。使用

.substring(1)

来忽略开头的第一个字符

&

代码如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>测试</title> 
</head>
<body>

<script>
url=new URL('https://www.example.com/?keyword=abc&id=12');
para = url.search; /* 获取属性(“?”后面的分段) */
para=para.substring(1);
a=para.split("&");
/* 分行显示第一个和第二个参数 */
document.write(a[0]);
document.write('<br>');
document.write(a[1]);
</script> 

</body>
</html>

显示如下:

请添加图片描述

这时候可以更近一步获取某一个参数名或者参数值,代码如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>测试</title> 
</head>
<body>

<script>
url=new URL('https://www.example.com/?keyword=abc&id=12');
para = url.search; /* 获取属性(“?”后面的分段) */
para=para.substring(1);
a=para.split("&");
document.write(a[0].split("=")[0]); /* 第一个参数的参数名 */
document.write('<br>');
document.write(a[0].split("=")[1]); /* 第一个参数的参数名 */
</script> 

</body>
</html>

显示如下:

请添加图片描述

希望可以帮到有需要的人~



版权声明:本文为qq_33919450原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。