JavaScript学习之获取URL参数
最近看了几道面试题,其中有一道就是关于写一个方法来获取浏览器地址栏URL查询部分的字段内容。虽然之前看过相关的东西,但感觉有点模糊,所以就又全面的学习一遍,谨以此文记之!
准备知识
在JavaScript中,既然说到URL(这里也只是根据本题浅显介绍),那肯定就要说Location对象了:
①Location对象是window对象的一个属性,可通过window.location来访问(因为window就是全局对象,所以可以直接使用location来引用Location对象喽);
②Location对象包含当前有关URL的信息。
Location对象的八个属性:
|
属性 |
描述 |
|
hash |
设置或返回从井号(#)开始的URL(锚) |
|
host |
设置或返回主机名和当前URL的端口号 |
|
hostname |
设置或返回当前URL的主机名 |
|
href |
设置或返回完整的URL |
|
pathname |
设置或返回当前URL的路径部分 |
|
port |
设置或返回当前URL的端口号 |
|
protocol |
设置或返回当前URL的协议 |
|
search |
设置或返回从问号(?)开始的URL(查询部分) |
还有一个属性,名字是origin,它的定义相当于:协议+主机名(域名)+端口号(IE下不支持此属性,我看w3cSchool上也没有,但Chrome和FF中却有,不知是否是标准)。以下是各个属性的实际取值(Chrome下):

因为这个URL使用的是浏览器默认端口80,所以函数端口号的地方都使用空字符串代替了。
Location对象的三个方法:
|
属性 |
描述 |
|
assign(newURL) |
加载新的文档,会将当前文档地址和新的文档地址放到历史记录中 |
|
reload(force) |
重新加载当前文档:①如果该方法没有设置参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的;②如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 |
|
replace(newURL) |
用新的文档替换当前文档,但是当前文档地址会从历史记录中删除 |
获取URL参数
上面复习了一下Location对象,下面开始说正题。获取URL参数,一开始我是把所有参数的信息都放入一个对象然后返回这个对象,实现如下:
function getUrlSearchObj(url){
var result = {};
var searchIndex = url.indexOf('?');
var hashIndex = url.indexOf('#')===-1?url.length:url.indexOf('#');
var searchStr = url.slice(searchIndex+1, hashIndex);
var searchArr = searchStr.split('&');
for(var i=0;i<searchArr.length;i++){
var eleArr = searchArr[i].split('=');
result[eleArr[0]] = eleArr[1];
}
return result;
}
当然,在实际项目中大多数是根据一个参数名来获取当前URL中该参数的值,实现如下:
function getSearchString(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var result = window.location.search.substr(1).match(reg);
if(result != null){
return result[2];
}else{
return null;
}
}
JavaScript学习之获取URL参数的更多相关文章
- django学习-5.获取url参数和name的作用
1.前言 假如我们要打开这两个博客园地址:[https://www.cnblogs.com/xiamen-momo/archive/2020/11.html].[https://www.cnblogs ...
- javascript获取url参数的方法
发布:thatboy 来源:Net [大 中 小] 本文介绍下,在javascript中取得url中某一个参数的方法,这里分享一个小例子,供大家学习参考下.本文转自:http://www. ...
- JavaScript获取URL参数公共方法
写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...
- 多浏览器兼容用javascript获取url参数的方法比较推荐的一种
多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...
- javascript获取URL参数和参数值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript&jQuery获取url参数方法
JavaScript&jQuery获取url参数方法 function getUrlParam(name){ var reg = new RegExp("(^|&)" ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
- JavaScript获取URL参数方法总汇
现在做页面基本都用AJAX,因此导致操作很麻烦,每次都需要通过JS获取url中的参数值,网上所搜到很多资料,没一次能记住的,也不知道在哪个项目中使用过,现在又需要通过JS获取url参数,因此不能在偷懒 ...
- javascript 获取url参数
/** window.location.search获取url地址?以后的值 获取url参数有两种方法,第一种如下,第二种是通过正则 */ //基本版 function getParam() { va ...
随机推荐
- 【Cocos2d-x】源代码分析之 2d/ui/Widget
从今天開始 咱也模仿 红孩儿这些大牛分析源代码 ,因为水平有限 不正确之处欢迎狂喷.哈哈. #ifndef __UIWIDGET_H__ #define __UIWIDGET_H__ #include ...
- mysqldump 命令的使用
1.导出结构不导出数据 mysqldump -d databasename -uroot -p > xxx.sql 2.导出数据不导出结构 mysqldump -t databasename - ...
- python遗产
1. python类方法的定义: class Animal(): def __init__(self,name): self.name=name; def show(self): print s ...
- 我收集的sonar参考资料
sonarQube代码质量管理工具环境筹建笔记 http://www.myexception.cn/open-source/1307345.html 配置sonar.jenkins进行持续审查 htt ...
- HDU 2845 Beans (动态调节)
Beans Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 使用autoconf和automake生成Makefile文件(转)
Makefile好难写 曾经也总结了一篇关于Makefile的文章<make和makefile的简单学习>.但是,总结完以后,发现写Makefile真的是一件非常痛苦的事情,的确非常痛苦. ...
- Android - 直线(line)画法
Android - 直线(line)画法 本文地址: http://blog.csdn.net/caroline_wendy 横线(horizontal line) <View android: ...
- ZOJ1463:Brackets Sequence(间隙DP)
Let us define a regular brackets sequence in the following way: 1. Empty sequence is a regular seque ...
- LINQ之路系列文章导读
本系列文章将会分为3篇来进行阐述,如下: LINQ之路(1):LINQ基础 LINQ之路(2):LINQ to SQL本质 LINQ之路(3):LINQ扩展
- 巧妙设备MTU的大小,轻松提网速
MTU是什么? "MTU=最大传输单元 单位:字节" 我们在使用互联网时进行的各种网络操作,都是通过一个又一个"数据包"传输来实现的.而MTU指定了网络中可数据 ...