javascript分享几种获取URL地址中查询字符串参数和值的方法
时间:2017-07-28
本文章向大家介绍javascript如何获取一个页面地址中的查询字符串参数,包括参数的key键和值。这里主要使用到正则表达式的相关知识,需要的朋友可以参考一下。
方法一:原生JavaScript
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
用法:
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)
注意:如果一个参数存在多次(?foo=lorem&foo=ipsum),您将获得第一个值(lorem)
方法二:插件
插件Purl允许检索URL的所有部分,包括锚点,主机等。
它可以使用或不使用jQuery。
用法很简单,很酷:
var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'
然而,该插件已经没人维护了,笔者建议使用URI.js代替。代码如下:
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
- CentOs7.3 ssh 免密登录
- 基础篇章:关于 React Native 之 Touchable 系列组件的讲解
- 基础篇章:关于 React Native 之 Navigator 组件的讲解
- CentOs7.3 搭建 ZooKeeper-3.4.9 单机服务
- Ubuntu 17.04 编译安装 Nginx 1.9.9
- CentOS7.3 安装 iptables 与详细使用
- CentOs7.3 安装 maven3.5
- 基础篇章:关于 React Native 之 Picker 组件的讲解
- Java8的十大新特性你了解多少呢?
- spring 监听器
- ELK 集群 Kibana 使用 X-Pack 权限控制,监控集群状态,实时的生成,警报,监视,cpu,内存,磁盘空间,等等一系列,报告和的可视化图形
- Dubbo详细介绍与安装使用过程
- 基础篇章:关于 React Native之 ActivityIndicator 组件的讲解
- 基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【SpringBoot WebFlux 系列】 header 参数解析
- URL 去重的 6 种方案!(附详细实现代码)
- 原生JS封装拖动验证滑块你会吗?
- 企业远程视频会议云服务EasyRTC-SFU版本支持 https 功能设计逻辑
- python之编码解码、字符串常用方法
- python之列表
- 一文带你深入理解Mysql索引底层数据结构与算法
- CGI & FastCGI
- 可输出sql的PrepareStatement封装
- spring mvc基础配置
- spring 事务管理方式及配置
- spring 整合 ActiveMQ
- Spring 配置请求过滤器,编码格式设为UTF-8,避免中文乱码
- ntopng网络监控-远程协助/访问
- 使用JUnit4测试Spring