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 insertAfter() 实现函数代码
Oct 12 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
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
php 生成饼图 三维饼图
2009/09/28 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
python中from module import * 的一个坑
2014/07/20 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
python获取目录下所有文件的方法
2015/06/01 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python如何生成网页验证码
2018/07/28 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python django中8000端口被占用的解决
2019/12/17 Python
Django视图类型总结
2021/02/17 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
学生个人自我鉴定
2014/03/26 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
离婚协议书怎么写
2014/09/12 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Go获取两个时区的时间差
2022/04/20 Golang