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 相关文章推荐
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
destoon数据库表说明汇总
2014/07/15 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python tqdm库的使用
2020/11/30 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python