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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
swiper实现导航滚动效果
Dec 13 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
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
python 对xml解析的示例
2021/02/27 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
运动会100米解说词
2014/01/23 职场文书
社区春季防火方案
2014/06/02 职场文书
户外拓展训练感想
2015/08/07 职场文书
高考升学宴主持词
2019/06/21 职场文书
Golang jwt身份认证
2022/04/20 Golang