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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
Javascript面向对象编程
Mar 18 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
简单的js计算器实现
Oct 26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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注入实例
2006/10/09 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python中使用PIPE操作Linux管道
2015/02/04 Python
详解python Todo清单实战
2018/11/01 Python
用Python逐行分析文件方法
2019/01/28 Python
python实现对输入的密文加密
2019/03/20 Python
pandas取出重复数据的方法
2019/07/04 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
精神文明单位申报材料
2014/05/02 职场文书
学习型班组申报材料
2014/05/31 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
现实表现证明材料
2015/06/19 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
Go并发4种方法简明讲解
2022/04/06 Golang
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python