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 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
简单的渐变轮播插件
Jan 12 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
微信小程序实现图片上传
May 23 Javascript
Javascript 对象(object)合并操作实例分析
Jul 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python 文件操作实现代码
2009/10/07 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python实现KNN邻近算法
2021/01/28 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python实现弹跳小球
2019/05/13 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
机修工岗位职责
2013/11/24 职场文书
季度思想汇报
2014/01/01 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
发展部经理职责规定
2014/02/22 职场文书
机关节能减排实施方案
2014/03/17 职场文书