JS 获取 URL 参数稍微有点麻烦,因为 JS 只能获取到 URL 的某一部分,但是不能再细分。如果想获取某一项参数,那么还需要使用一下字符串截取。
所以分为两步:
- 获取 URL 的参数部分
- 截取某一个参数(甚至细分到参数名和参数值)
首先假设 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>
显示如下:
希望可以帮到有需要的人~
今天的文章js获取url后面的参数并变为对象_js获取url后面的参数分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/75962.html