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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
canvas实现探照灯效果
Feb 07 Javascript
vuejs如何配置less
Apr 25 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
利用js实现简单开关灯代码
Nov 23 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闭包函数传参及使用外部变量的方法
2016/03/15 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
js+html获取系统当前时间
2017/11/10 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python 文件与目录操作
2008/12/24 Python
详解Python中break语句的用法
2015/05/14 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python初步实现word2vec操作
2020/06/09 Python
python代码实现猜拳小游戏
2020/11/30 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
教师自荐信范文
2013/12/09 职场文书
我的老师教学反思
2014/05/01 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
学生病假条范文
2015/08/17 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android