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 读取图片文件的大小
Jun 25 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jquery默认校验规则整理
Mar 24 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
vue项目中axios使用详解
Feb 07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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/04/09 欧美动漫
建立文件交换功能的脚本(一)
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
js实现日历与定时器
2017/02/22 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
JS实现图片切换特效
2019/12/23 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
美发店5.1活动方案
2014/01/24 职场文书
酒店员工检讨书
2014/02/18 职场文书
二手房买卖协议书
2014/04/10 职场文书
读书活动总结
2014/04/28 职场文书
国际金融专业自荐信
2014/07/05 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
环境建议书
2015/02/04 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
干部考核工作总结
2015/08/12 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书