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和javascript的区别(常用方法比较)
Jul 04 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
JS功能代码集锦
May 04 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
Less 安装及基本用法
May 05 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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
php下载文件的代码示例
2012/06/29 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python3.5 创建文件的简单实例
2018/04/26 Python
Python 统计字数的思路详解
2018/05/08 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python 6种方法实现单例模式
2020/12/15 Python
输入N,打印N*N矩阵
2012/02/20 面试题
函授毕业自我鉴定
2014/02/04 职场文书
五年级科学教学反思
2014/02/05 职场文书
小学作文评语大全
2014/04/21 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js