参考资料

http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html

很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,可以通过正则自己解析,但比较麻烦,我们可以让浏览器帮我们完成这一任务。

方法

方法就是在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。

var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host);

扩展

利用上述方法,可以实现一个更健壮的URL解析方法

function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}

利用a标签解析URL的更多相关文章

  1. [前端]利用a标签获取url里所需的内容

    function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, pr ...

  2. a标签解析url

    var url = 'http://127.0.0.1:8080/index.jsp?username=admin#name'; var aLink = document.createElement( ...

  3. Javascript 利用a标签自动解析URL分析网址实例

    /* * @function: 通过a标签解析url标签 * @param:url url参数是字符串,解析的目标 通过IE6-9 chrome Firefox测试 * */ function par ...

  4. 利用 a 标签自动解析 url

    很多时候,我们有从 url 中提取域名,查询关键字,变量参数值等的需求,然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取.方法就是先创建一个 a 标签然后将需要解析的 url 赋值给  ...

  5. 【javascript】利用 a 标签自动解析 url

    很多时候,我们有从 url 中提取域名,查询关键字,变量参数值等的需求,然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取.方法就是先创建一个 a 标签然后将需要解析的 url 赋值给  ...

  6. IOS开发---菜鸟学习之路--(二十一)-利用正则表达式解析URL获取其中的参数

    因为项目需要解析URL当中参数的部分,在网上搜索了一下都没有相关的资料. 然后就自己写了一个 其实我就是通过正则表达式来处理URL 进行解析的 好了直接上代码吧 也是非常的简单,大家拷贝过去就可以使用 ...

  7. (数据科学学习手札145)在Python中利用yarl轻松操作url

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,在诸如网络爬虫.web应用开发 ...

  8. struts2 标签 --<<s:url >

    Struts2中的链接标签 <s:url>和<s:a> 普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page conten ...

  9. 利用strut2标签自动生成form前端验证代码

    利用strut2标签自动生成form前端验证代码,使用到的技术有1.struts2标签,如<s:form> <s:textfieled>2.struts2读取*Validati ...

随机推荐

  1. TouchSlop与VelocityTracker认识

    TouchSlop是处理触摸事件中的一个常量,被系统认为滑动和点击事件的临界点.理 解这个touchSlop是一个滑动距离值的常量,也就是说当我们手触摸在屏幕上滑动时,如果滑动距离没有超过touchS ...

  2. zabbix 微信报警

    http://blog.csdn.net/wh211212/article/details/52735236 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来越 ...

  3. Asp.Net MVC<二> : IIS/asp.net管道

    MVC是Asp.net的设计思想,而IIS/asp.net是它的技术平台.理解ASP.NET的前提是对ASP.NET管道式设计的深刻认识.而ASP.NET Web应用大都是寄宿于IIS上的. IIS ...

  4. Linux基础3(文件权限)

    文件权限 1.普通权限 (登陆用户对文件或目录的读写执行的权限) 普通权限对管理员用户无效 文件和目录 都有4中类型的用户u 所有者 : 文件.目录的创建者g 所属组 : 文件.目录属于的用户组o 其 ...

  5. [聚类算法] K-means 算法

    聚类 和 k-means简单概括. 聚类是一种 无监督学习 问题,它的目标就是基于 相似度 将相似的子集聚合在一起. k-means算法是聚类分析中使用最广泛的算法之一.它把n个对象根据它们的属性分为 ...

  6. oninput等表单事件

    oninput等表单事件 过去我们常使用keydown和keyup辅助表单元素的处理,这要求处理时,表单元素必须处于激活(聚焦)状态.oninput事件可以实时监听文本框的输入变化.   现代浏览器支 ...

  7. Leetcode 134 Gas Station

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  8. 【BZOJ-1458】士兵占领 最大流

    1458: 士兵占领 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 782  Solved: 456[Submit][Status][Discuss] ...

  9. 下载Spring的jar包的方法

  10. EF-CodeFirst-1 玩起来

    注本文是学习旺杰兄的CodeFirst系列所写 CodeFirst CodeFirst是一种全新的玩法,代码先行使得我们更了解实体之间的关系.而且更加符合了DDD领域驱动设计的思想 .所以CodeFi ...