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 相关文章推荐
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript 写类方式之七
2009/07/05 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书