Javascript解析URL方法详解


Posted in Javascript onDecember 05, 2014

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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 #Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 #Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 #Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
You might like
header导出Excel应用示例
2014/01/24 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
php对象工厂类完整示例
2018/08/09 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
python中实现指定时间调用函数示例代码
2017/09/08 Python
Django开发中的日志输出的方法
2018/07/02 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python判断是空的实例分享
2020/07/06 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
学生思想表现的评语
2014/01/30 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
学校党员干部承诺书
2015/05/04 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
python程序的组织结构详解
2021/12/06 Python