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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
js如何获取网页所有图片
May 12 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
地摊中国 - 珍藏老照片
2020/08/18 杂记
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python异步任务队列示例
2014/04/01 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
12岁生日感言
2014/01/21 职场文书
推荐信格式范文
2014/05/09 职场文书
档案信息化建设方案
2014/05/16 职场文书
班级文化标语
2014/06/23 职场文书
法人授权委托书
2014/09/16 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
英文慰问信范文
2015/03/24 职场文书
农业项目投资意向书
2015/05/09 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
学生会干部任命书
2015/09/21 职场文书