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的投票系统显示结果插件
Aug 12 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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
最省空间的计数器
2006/10/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue程序调试的方法
2019/06/17 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python实现计算器简易版
2020/12/17 Python
数百万免费的图形资源:Freepik
2020/09/21 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
管理科学大学生求职信
2013/11/13 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
毕业证丢失证明
2014/01/15 职场文书
小学信息技术教学反思
2014/02/10 职场文书
初中学生期末评语
2014/04/24 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
西双版纳导游词
2015/02/03 职场文书
网络销售员岗位职责
2015/04/11 职场文书
旅游安全责任协议书
2016/03/22 职场文书