需求分析
随着浏览器端JavaScript编程的流行,经常碰到要分析和获取url上带的参数。
正则表达式实现
先看代码:
function getUrlParam(name) {
var reg = new RegExp("[?&]" + name + "=([^?&]*)[&]?", "i");
var match = location.search.match(reg);
return match == null ? "" : match[1];
}
这个方法通过构造一个正则表达式来匹配到需要查询的url参数,location.search是获取到url中的查询字符串部分。这个方法的优点是简洁,缺点是每次都需要对字符串进行分析查找,多次查询同一个参数效率低下,所以有了下面这个方法。
利用闭包和正则表达式实现
代码如下:
var getUrlParam = function(){
var args = null;
return function(name){
if(args === null){
if(location.search == "") return "";
var queryArray = location.search.substring(1).split("&");
var i;
args = {};
for(i = 0;i < queryArray.length;i++){
var match = queryArray[i].match(/([^=]+)=([^=]+)/);
if(match !== null){
args[match[1]] = match[2];
}
}
}
return args[name] == undefined ? "" : args[name];
};
}();
这个方法利用了js的函数闭包,将url参数都保存在一个匿名函数里面的args变量中,而且除了通过getUrlParam外,任何方法都访问不到该变量。而且只有第一次获取url参数的时候才会分析url,以后就直接从变量args中读取。不过这个方法也有缺点,就是代码比较复杂,还有就是一次把不需要的参数也解析出来了,有的时候只用一次就太不值了,还有闭包带来的性能降低。其优点就是对于需要多次访问的时候,除了第一次访问需要解析,后面都很快。
总结
综上所述,如果在一个页面中需要多次获取url参数就推荐使用第二种方法,如果访问次数很少的话第一种则更好。
[转自:http://binbinliao.com/programming/javascript-urlparams.html]
分享到:
相关推荐
3. encodeURIComponent()方法:这个方法同样采用UTF-8编码格式,但与encodeURI不同的是,它会对更多的字符进行编码,包括URI中的保留字符。由于其编码范围较广,如果字符串中包含URL的多个部分(例如路径、查询字符...
微信小程序实现页面间传值是小程序...以上介绍的几种方法,包括URL传参、小程序本地存储和全局数据存储,都是微信小程序开发中常用且有效的数据传递手段,熟练掌握这些方法对于提高开发效率和应用性能都有重要作用。
1. `query`参数:通过跳转页面时携带`query`对象,可以在目标页面的`onLoad`中获取这些参数,如`wx.navigateTo({ url: '/pages/detail/detail?itemID=123' })`。 2. `globalData`:全局数据对象,可以在App.js中定义...
本文详细介绍了使用JavaScript实现页面a向页面b传参的几种方法。首先,根据给定的文件内容,我们将具体探讨如下三种方法:使用localStorage进行数据存储、使用cookie以及通过URL传参。 1. 使用localStorage进行数据...
本文将详细介绍几种常见的JSP页面间传值方法,并通过示例代码来具体阐述每种方法的应用场景。 #### 1. URL重写(GET方法) URL重写是Web开发中最简单且最常用的传值方式之一,主要通过在URL后添加查询字符串的方式...
微信小程序提供了几种跨页面传参的方式: - ** navigateTo**: 这种方式用于跳转到非 tabBar 的页面,并且页面之间存在返回关系,可以使用`options`对象传递参数。 - ** redirectTo**: 如果需要替换当前页面,而...
以上介绍了几种常用的JSP页面传值方式,包括使用表单、URL重写、JavaScript动态改变表单行为、JSP内置对象和标签库以及Cookie和Session。不同的场景下可以选择不同的方法来满足需求。在实际应用中,开发者还需要考虑...
此外,JavaScript提供了一个内置函数`encodeURIComponent()`,可以用于转义URL中的特殊字符。但在这个问题中,可能需要自定义函数来特定处理加号(+)的转义,如`function rStr(str) { str = str.replace(/\+/g, "%...
总的来说,`js实现同源页面参数的传递(jquery.params.js)`这个实例可能是利用jQuery提供的功能,结合URL查询字符串、本地存储等方法,在同源页面之间实现参数的传递。这在需要在多个页面间共享状态或者进行特定...
文中给出了几个例子,比如运行 npm run serve-sit 时,会启动服务并同时使用sit环境的配置。 知识点4:环境变量的获取和定义 在JavaScript代码中,我们可以通过 process.env 对象来访问环境变量。通过设置环境变量...
具体包括以下几个方面: 1. **场景设置**: - **绝对定位法**:由于场景中可能不存在一个绝对固定的空间位置物体作为参照,因此采用绝对定位法来确定摄像机的位置更为简便可靠。这种方法虽然可能需要手动调整每个...
页面转换方法主要有以下几种: 1. **HTML链接**:使用`<a>`标签,href属性可以包含路由链接,如`<a href="#/second/2/3">second</a>`。AngularJS会自动捕获这个点击事件并执行相应的路由。 2. **$stateGo**:如果...
根据提供的文档标题、描述以及部分内文,我们可以总结出以下几个主要的知识点: ### 1. 可视窗口的背景着色与元素的绝对定位 **背景着色**: - 使用CSS来设置整个可视窗口(即浏览器窗口)的背景颜色。 - 示例代码...
子页面加载后,通过JavaScript的`window.location.search`获取查询字符串,解析并使用这些数据。 2. `localStorage`或`sessionStorage`:这两种Web存储机制允许在浏览器的客户端存储数据。父页面可以将数据写入存储...
当用户点击“确定”按钮,`formSubmit`事件被触发,`uesrname`的值被获取并存储在`qu`变量中,然后通过`wx.navigateTo`函数导航到`logs/logs`页面,并将`uesrname`的值作为URL的查询参数。 在目标页面`logs.js`中,...
或者通过在JS文件中调用`wx.navigateTo()`方法进行跳转并传参: ```javascript wx.navigateTo({ url: '../index/index?id=1&name=aaa', }); ``` 在目标页面的`onLoad`生命周期函数中,可以通过`options`对象...
一种是在新的窗口或标签页中打开一个新的页面,可以通过JavaScript的window对象的open方法来实现。在使用open方法时,需要提供要打开的新页面地址。如果目标页面是一个绝对URL地址,那么直接提供即可。如果是相对...
这个方法与上面的`$.ajax`方法类似,只是没有那么多配置选项,适用于简单的POST请求。 4. **通过HTML表单`<form>`的`action`属性传递数据** 表单提交是传统的方式,适用于用户填写并提交信息的场景。表单数据通过...
在"winform 接入百度地图源码工程文档"中,我们可以预期以下几个关键知识点: 1. **控件集成**:在winform中,开发者通常会使用WebBrowser控件来嵌入HTML和JavaScript实现的地图API,因为百度地图API主要是基于Web...
`来转发请求,并在目标页面中通过`request.getParameter()`等方法获取传递过来的参数。 #### 示例代码解析 在提供的示例代码中,父页面和子页面分别使用了简单的JavaScript函数实现了相互之间的元素访问。这种直接...