参考资料

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. SpringMVC学习--拦截器

    简介 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 拦截器定义 定义拦截器,实现HandlerInterceptor接 ...

  2. 显示当前用户所拥有的表&当前用户可以访问的所有表&数据库中的所有表&当前用户信息&当前用户所能管理的用户&数据库中所拥有的用户

    1)显示当前用户名称:show user或者show user; 2)显示当前用户信息(包括用户名之外还有其他信息):select * from user_users; 3)显示数据库中所含有的所有用 ...

  3. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  4. ubuntu15.10下搭建cordova+ionic开发环境

    安装jdk 在命令下输入java如果没有安装会提示该命令包含于openjdk软件包 sudo apt-get install openjdk然后按下tab会列出openjdk开头的软件包 我这里就选择 ...

  5. Js-加密

    1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...

  6. Web 安全:隐藏服务版本号

    前述 为了防止一些恶意用户对 apache.nginx.php 等显示出来的版本信息进行攻击,生产环境需要关闭 web 服务的版本信息: apache 隐藏版本号 修改 httpd.conf,添加如下 ...

  7. awk同时处理多个文件

    关于awk的多文件处理: awk的数据输入有两个来源,标准输入和文件,后一种方式支持多个文件,如1.shell的Pathname Expansion方式:awk '{...}' *.txt # *.t ...

  8. awk打开多个文件的方法

    1.当awk读取的文件只有两个的时候,比较常用的有三种方法(1)awk 'NR==FNR{...}NR>FNR{...}' file1 file2 (2)awk 'NR==FNR{...}NR! ...

  9. Leetcode Power of two, three, four

    Given an integer, write a function to determine if it is a power of two. Hint: Could you solve it in ...

  10. 大规模图的存储(前向星、next数组)

    大规模图的储存 在信息学中,经常会遇到比较大规模图,使用指针固然是很好的方法,不过一有指针速度不如数组之说,二有指针不如数组稳定之说,三有,也是最重要的,指针不如数组来得方便,这也便是大多数Oier不 ...