脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript解析URL方法详解

Javascript解析URL方法详解

 更新时间：2014年12月05日 10:03:15   投稿：hebedich  
本文介绍了完整的URL的结构构成以及解析URL的2种方法，包括正则分析法和split法，非常的简单实用，有需要的小伙伴可以参考下

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

完整的URL由这几个部分构成：
scheme://host:port/path?query#fragment

scheme  = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径

query = 查询
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用”&”符号隔开，每个参数的名和值用”=”符号隔开。

fragment = 信息片断
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL
http://www.master8.net:80/seo/?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.master8.net

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:”"

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

8. url参数值

方法一：正则分析法

复制代码 代码如下:

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

方法二：采用split拆成数组

复制代码 代码如下:

function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}

方法很简单，却是很实用，这里列出了2种自己常用的方法，小伙伴们有不同的方法还请告之，本文持续更新。大家共同进步

您可能感兴趣的文章:

相关文章

  • JavaScript中这6个新特性你都了解了吗

    JavaScript中这6个新特性你都了解了吗

    作为一门不断演进的语言,JavaScript每年都会引入新特性,这篇文章主要为大家整理了一些个人认为特别有用的新JavaScript特性,以及一些补充的实例代码,希望对大家有所帮助
    2024-01-01
  • 拖拉表格的JS函数

    拖拉表格的JS函数

    拉表格，一个函数调用即可
    2008-11-11
  • javascript获取下拉列表框当中的文本值示例代码

    javascript获取下拉列表框当中的文本值示例代码

    需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，下面与大家分享下如何使用js获取下拉列表框文本值，由此需求的朋友可以参考下
    2013-07-07
  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件

    这篇文章主要为大家详细介绍了微信小程序实现页面监听自定义组件的触发事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • uni-app使用uploadFile上传多张图片的具体实现

    uni-app使用uploadFile上传多张图片的具体实现

    在微信小程序中不支持多张图片上传,需要做循环实现多张图片上传,下面这篇文章主要给大家介绍了关于uni-app使用uploadFile上传多张图片的具体实现,需要的朋友可以参考下
    2023-04-04
  • js data日期初始化的5种方法

    js data日期初始化的5种方法

    本文为大家介绍下js data日期初始化的常用5种方法，感兴趣的朋友可以参考下
    2013-12-12
  • 低门槛开发iOS、Android、小程序应用的前端框架详解

    低门槛开发iOS、Android、小程序应用的前端框架详解

    结合AVM官网的介绍和我自己的一些实践经验，我总结了一系列AVM的特性，我想这些内容足以让你主动去学习AVM框架了
    2021-10-10
  • webpack结合express实现自动刷新的方法

    webpack结合express实现自动刷新的方法

    这篇文章主要给大家介绍了关于webpack结合express实现自动刷新的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • JS防抖和节流实例解析

    JS防抖和节流实例解析

    这篇文章主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript判断输入是否为整数的正则表达式

    JavaScript判断输入是否为整数的正则表达式

    这篇文章主要介绍了JavaScript判断输入是否为整数的正则表达式,用于验证不同类型的数据,包括数字、字符、电子邮件、网址、身份证号、手机号码等,每个模式都提供了详细的正则表达式和匹配说明,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04

最新评论