最近看了几道面试题,其中有一道就是关于写一个方法来获取浏览器地址栏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参数的更多相关文章

  1. django学习-5.获取url参数和name的作用

    1.前言 假如我们要打开这两个博客园地址:[https://www.cnblogs.com/xiamen-momo/archive/2020/11.html].[https://www.cnblogs ...

  2. javascript获取url参数的方法

    发布:thatboy   来源:Net     [大 中 小] 本文介绍下,在javascript中取得url中某一个参数的方法,这里分享一个小例子,供大家学习参考下.本文转自:http://www. ...

  3. JavaScript获取URL参数公共方法

    写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...

  4. 多浏览器兼容用javascript获取url参数的方法比较推荐的一种

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...

  5. javascript获取URL参数和参数值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript&jQuery获取url参数方法

    JavaScript&jQuery获取url参数方法 function getUrlParam(name){ var reg = new RegExp("(^|&)" ...

  7. 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 ...

  8. JavaScript获取URL参数方法总汇

    现在做页面基本都用AJAX,因此导致操作很麻烦,每次都需要通过JS获取url中的参数值,网上所搜到很多资料,没一次能记住的,也不知道在哪个项目中使用过,现在又需要通过JS获取url参数,因此不能在偷懒 ...

  9. javascript 获取url参数

    /** window.location.search获取url地址?以后的值 获取url参数有两种方法,第一种如下,第二种是通过正则 */ //基本版 function getParam() { va ...

随机推荐

  1. Java获得正则表达式

    t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,wid ...

  2. spring改版官网下载jar包, 源代码和文档

    从网上找了一些方法,现在都整理了一下,有简单粗暴的,也有百转回肠的(详细,直接从官网一步一步的进入下载页),希望大家根据自己的喜好可以找到的真爱. 方法一:(简单粗暴直接) http://repo.s ...

  3. IntelliJ IDEA 问题总结之中的一个 —— jar包、assets、maven、git

    因为工作须要,这几天開始弃用eclipse,换idea.用了几天,idea确实有些地方比較方便.可是麻烦也是不少.并且网上相应的资料并没有eclipse那么多,非常多都是自己琢磨解决的,所以想弄个帖子 ...

  4. oracle存储过程的例子

    oracle存储过程的例子 分类: 数据(仓)库及处理 2010-05-03 17:15 1055人阅读 评论(2)收藏 举报 认识存储过程和函数 存储过程和函数也是一种PL/SQL块,是存入数据库的 ...

  5. HDU 4313 Matrix

    水题:在一个双连通的树上有一些点很有破坏性,我们要把这些带破环性的点隔开,就是破坏一些边使这些点之间不连通,破坏一条边需要一点时间,问最少需要多少时间(同一时间只能破坏一个地方,且忽略位置转移的时间) ...

  6. poj 2288 Islands and Bridges

    题意: 给你一个双向连通图,求 获得权值最大 的 哈密顿通路的 权值 和 这个权值对应的数目: 其中权值计算方法是  列如 ABCD  权值是a+b+c+d+ab+bc+cd 如果 A,B,C  和B ...

  7. 【Nginx】磁盘文件写入飞地发

    文章继续.什么时候Nginx当用户请求一个文件,这将无法读取该文件的内容加载到内存,然后从内存发送,但电话sendfile况下,从内核直接发送出去.这样做显然效率要更高.Nginx也为我们封装好了一系 ...

  8. uml学习书籍

     uml真正实用的书5这是足够.学习如以下的处理: <UML distilled><--><UML和模式应用>-><UML用户指南> 附加两本&l ...

  9. C奇淫技巧,——宏神奇

    一个.宏列表 当这个问题面临: 有一个标志变量.位代表对应的含义. 我们须要提供一组函数来訪问设置这些位.可是对于每一个标记位的操作函数都是相似的.若有32个位,难道要搞32套相似的操作函数么? 你或 ...

  10. SWFUpload多文件上传 文件数限制 setStats()

    使用swfupload仿公平图片上传 SWFUpload它是基于flash与javascript的client文件上传组件. handlers.js文件 完毕文件入列队(fileQueued) → 完 ...