js中window.location.search的用法和作用。

本文介绍如何使用JavaScript中的window.location对象来捕获页面GET请求中的参数。具体实现包括利用window.location.search获取URL中的查询部分,并通过字符串操作及数组方法解析出参数。

转载自:http://blog.youkuaiyun.com/qq_27093465/article/details/50731087

用该属性获取页面 URL 地址:

window.location 对象所包含的属性

属性 描述
hash 从井号 (#) 开始的 URL(锚)
host 主机名和当前 URL 的端口号
hostname 当前 URL 的主机名
href 完整的 URL
pathname 当前 URL 的路径部分
port 当前 URL 的端口号
protocol 当前 URL 的协议
search 从问号 (?) 开始的 URL(查询部分)




如图就是取出url中的参数。

JS 脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。

大概处理如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var searchURL = window.location.search;  
  2. searchURL = searchURL.substring(1, searchURL.length);  
  3. var targetPageId = searchURL.split("&")[0].split("=")[1];
### 关于 `window.location.href` `window.location` 的区别及其获取 URL 参数的方法 #### 1. **`window.location.href` `window.location` 的基本概念** `window.location.href` 是 `window.location` 对象的一个属性,表示当前页面的完整 URL 地址。而 `window.location` 是一个完整的对象,包含了更多有关当前页面的信息,例如主机名 (`hostname`)、端口号 (`port`)、路径 (`pathname`) 等[^4]。 - `window.location.href`: 表示整个 URL 字符串。 - `window.location`: 提供了一个接口来访问设置与当前页面相关的各种信息。 两者的主要区别在于: - `window.location.href` 是字符串类型,仅提供 URL 的完整表示。 - `window.location` 是一个对象,提供了更多的方法属性来操作 URL[^3]。 --- #### 2. **如何使用 `window.location` 获取 URL 参数** ##### 方法一:通过正则表达式解析查询参数 可以编写一个通用函数,利用正则表达式从 `window.location.search` 中提取指定名称的参数值。 ```javascript function getUrlParameter(name) { const regex = new RegExp(`[?&]${encodeURIComponent(name)}=([^&#]*)`); const results = regex.exec(window.location.search); return results === null ? null : decodeURIComponent(results[1]); } // 示例调用 const paramValue = getUrlParameter('key'); // 替换 'key' 为你想获取的参数名 console.log(paramValue); ``` 这种方法适用于简单的键值对形式的查询字符串,并能够正确处理编码字符[^1]。 --- ##### 方法二:分割查询字符串并手动查找目标字段 如果不希望通过正则表达式实现,还可以通过对 `window.location.search` 的子串操作完成同样的功能。 ```javascript function getQueryValue(key) { const queryStr = window.location.search.substring(1); // 去掉开头的 '?' const pairs = queryStr.split('&'); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); if (decodeURIComponent(pair[0]) === key) { // 比较解码后的键名 return decodeURIComponent(pair[1]); // 返回对应的值 } } return null; // 如果未找到,则返回 null } // 示例调用 const value = getQueryValue('paramName'); // 替换 'paramName' 为实际参数名 console.log(value); ``` 这种方式适合于逐项对比需求较为简单的场景[^2]。 --- ##### 方法三:使用现代浏览器支持的 `URLSearchParams` API 在较新的环境中(如主流桌面端/移动端浏览器),推荐使用内置的 `URLSearchParams` 接口简化操作流程。 ```javascript function getUrlParam(paramName) { const params = new URLSearchParams(window.location.search); // 创建 URLSearchParams 对象 return params.get(paramName); // 调用 .get() 方法传入要找寻的名字即可得到对应的结果 } // 示例调用 const result = getUrlParam('searchKey'); // 替换 'searchKey' 为目标参数名 console.log(result); ``` 该方案不仅语义清晰,而且性能优越,在兼容性允许的情况下优先选用它来进行开发工作[^4]。 --- #### 3. **总结** `window.location.href` `window.location` 各自扮演着不同的角色: - `window.location.href` 更加专注于 URL 的整体表现形式; - `window.location` 则是一个更为强大的工具集,允许开发者深入挖掘 URL 的各个组成部分。 至于获取 URL 参数的具体实现方式,可以根据项目的实际情况个人偏好选择合适的技术路线——无论是传统的正则匹配还是现代化的 `URLSearchParams` API,都能满足日常开发中的绝大多数需求。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值