JavaScript解析URL地址栏参数的两种实现方案

JS获取URL参数的两种实现方案概述

在JavaScript中，获取URL地址栏参数主要有两种实现方式：一是利用正则表达式进行匹配提取，二是采用传统的字符串处理逻辑。本文强烈推荐使用第一种正则表达式方案，因其兼具便捷性与实用性，具体实现细节将在下文展开。

方法一：基于正则表达式的参数提取

方法一：基于正则表达式的参数提取方案（强烈推荐，兼顾实用与高效）。

function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}

以下通过具体案例进行说明：

假设当前地址栏URL为：abc.html?id=123&url=http://www.maidq.com

此时，若执行上述调用：alert(GetQueryString("url"));

浏览器将弹出提示框，显示内容为：http://www.maidq.com

若执行：alert(GetQueryString("id"));，则弹出内容为 123。

需要注意的是，如果URL中未传递参数（例如仅访问 abc.html 且无后续参数），直接调用该函数可能会导致报错。

因此，必须增加空值判断逻辑，先将结果赋值给变量进行校验：

var myurl=GetQueryString("url");
if(myurl !=null && myurl.toString().length>1)
{
alert(GetQueryString("url"));
} 

经过上述处理，即可避免报错情况的发生。

方法二：传统字符串处理方案

方法二：传统字符串处理方案

<script type="text/javascript">
function UrlSearch() 
{
var name,value; 
var str=location.href; //取得整个地址栏
var num=str.indexOf("?") 
str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ]

var arr=str.split("&"); //各个参数放到数组里
for(var i=0;i < arr.length;i++){ 
num=arr[i].indexOf("="); 
if(num>0){ 
name=arr[i].substring(0,num);
value=arr[i].substr(num+1);
this[name]=value;
} 
} 
} 
var Request=new UrlSearch(); //实例化
alert(Request.id);
</script>

假设将以下代码保存为1.html文件

访问该页面时传入参数，例如：1.html?id=test

此时即可成功获取到 test 的值。

在HTML文件中调用相关逻辑：

<script type="text/javascript">
var a="http://baidu.com";
</script>
</head>
<body>
<a id="a1" href="">sadfsdfas</a>
<script>
var a1=document.getElementById("a1");
a1.href=a;
</script>
<script type="text/javascript"> 
var a="http://xxx.com/gg.htm?cctv"; 
var s=a.indexOf("?"); 
var t=a.substring(s+1);// t就是?后面的东西了 
</script>

stringvar.substr(start [, length ]

该方法用于返回一个从指定起始位置开始、指定长度的子字符串。

stringvar

必选参数。指定要提取子字符串的字符串字面量或 String 对象。

start

必选参数。指定子字符串的起始位置，字符串首字符索引为 0。

length

可选参数。指定返回子字符串中包含的字符数量。

若 length 为 0 或负数，返回空字符串；若未指定该参数，则子字符串延续至 stringvar 末尾。

以下列举部分相关字符串处理参数：

str.toLowerCase() 转换为小写 str.toUpperCase() 字符串全部转换为大写

URL结构解析与window.location属性详解

URL即：统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由以下几个部分构成：

scheme://host:port/path?query#fragment

scheme: 通信协议

常用协议包括http, ftp, mailto等。

host: 主机名

指服务器（计算机）域名系统 (DNS) 主机名或 IP 地址。

port: 端口号

整数，可选。若省略则使用方案的默认端口，例如http的默认端口为80。

path: 路径

由零或多个"/"符号隔开的字符串，通常表示主机上的目录或文件地址。

query: 查询字符串

可选部分，用于向动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术构建的页面）传递参数。多个参数间用"&"符号分隔，每个参数的名称与值用"="符号隔开。

fragment: 信息片段 字符串，用于指定网络资源中的特定片段。例如在包含多个名词解释的网页中，可使用fragment直接定位到某一名词解释（也称为锚点）。

针对如下URL：

http://www.maidq.com/index.html?ver=1.0&id=6#imhere

可以通过JavaScript获取其中的各个组成部分：

1, window.location.href

返回整个URL字符串（即浏览器地址栏中显示的完整地址）。

本例返回值: http://www.maidq.com/index.html?ver=1.0&id=6#imhere

2, window.location.protocol

返回URL的协议部分。

本例返回值: http:

3, window.location.host

返回URL的主机部分。

本例返回值: www.maidq.com

4, window.location.port

返回URL的端口部分。

若采用默认端口（update: 即使显式添加了:80），返回值并非数字80，而是空字符串。

本例返回值:""

5, window.location.pathname

返回URL的路径部分（即文件地址）。

本例返回值: /fisker/post/0703/window.location.html

6, window.location.search

返回查询（参数）部分。

除了用于动态语言赋值外，同样可用于静态页面，并通过JavaScript获取相应的参数值。

本例返回值: ?ver=1.0&id=6

7, window.location.hash

返回锚点部分。

本例返回值: #imhere

以上介绍了JS获取地址栏参数的两种方法（简单实用），希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！