如何使用 Javascript 获取 URL 参数
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>
显示如下:
希望可以帮到有需要的人~
如何使用 Javascript 获取 URL 参数相关推荐
- JavaScript 获取url参数及解决中文乱码问题
1.获取url参数 方法一: // 获取url参数function getQueryVariable(variable) {var query = window.location.search.sub ...
- html获取url参数 php,如何使用JavaScript获取URL参数
如果你希望通过JavaScript获取和使用URL参数.在JavaScript中,可以使用"document.location.search"获取URL的参数.但是,由于你只能在U ...
- 【转贴】利用 Javascript 获取 URL 参数(适合IE、FF)
. ... .../test.html?str=123456 如何用Javascript接收类似上面的url参数呢?这个问题网上有很多答案,看了看,主要有两种,一个是利用字符串的截取,另一种是利用正则 ...
- JavaScript获取URL参数
文件1:realwall.js (function(window){var urltool = {getUrlParameterByKey : function(url,key){var result ...
- Javascript 获取url参数,hash值 ,cookie
/*** 获取请求参数* @param key* @returns {*}*/ function getRequestParameter(key){var params = getRequestPar ...
- javascript获取url参数的代码
代码 <script language = javascript> function request(paras){ var url = location.href; var paraSt ...
- javascript 获取URL参数
今天项目中遇到这个问题就是在Web前端根据URL的参数动态设置某一元素的值. 网上有很多这样的代码,无非是通过window.location.search.window.location或window ...
- html5获取url参数,javascript如何获取url参数
javascript获取url参数的方法:首先创建一个js示例文件:然后定义一个"getQueryVariable"函数:最后通过调用该函数来获取url参数即可. 本文操作环境:w ...
- 使用jquery获取url以及jquery获取url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1.jquery获取url很简单,代码如下1.window.location.href;其实只是用到了javascri ...
最新文章
- SAP物料价格评估与成本计算体系
- centos 7 忘记密码
- 大乐斗2服务器维护,2月23日更新公告
- linux rpm 包制作详解
- Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面
- 【C】——C项目中的菜单功能(源码)
- 计算机有新的更新,现在是2018年,我的电脑最近总是弹出说有重要更新,提示自2017年5月9日后,microsoft - Microsoft Community...
- 深入了解OWIN Katana
- Codeforces 1114C(数论+唯一分解)
- PHP 获取微视无水印源地址_PHP快速实现解析无水印播放地址URL——快手篇
- html 旋转木马 轮播,JS实现旋转木马轮播图
- Secondary NameNode:简单的介绍和理解
- python基础知识-12-模块的了解
- 【OpenCV】- 分水岭算法
- T-Code (Controlling)
- 《Rework》读书笔记
- Python中Numpy中省略号的作用
- 艾孜尔江_Unity 3D入门常用函数用法及案例概要【干货】
- 去掉CAJViewer广告的方法
- ​LeetCode刷题实战371:两整数之和