如何使用 Javascript 获取 URL 参数

大家好,我是知秋君,一个会写博客吟诗的知秋码农。今天说一说如何使用 Javascript 获取 URL 参数,希望能够帮助大家进步!!! JS 获取 URL 参数稍微有点麻烦,因为 JS 只能获取到 URL 的某一部分,但是不能再细分。如果想获取某一项参数,那么还需要使用一下字符串截取。 所以分为两步: 获取 URL 的参数部分 截取某一个参数(甚至细分到参数名和参数值) 首先假设 URL 是

大家好,我是知秋君,一个会写博客吟诗的知秋码农。今天说一说如何使用 Javascript 获取 URL 参数,希望能够帮助大家进步!!!

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> 

显示如下:
请添加图片描述

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

知秋君
上一篇 2024-07-03 15:31
下一篇 2024-07-03 15:31

相关推荐