利用a标签特性解析地址(附加属性说明)

首先我们看看实例

 a.href = ‘http://www.cnblogs.com/wayou/p/‘;
 console.log(a.host);

控制台会输出 "www.cnblogs.com"

所以我们可以利用此特性进行拓展,制作一个更加健壮的解析器。

在此先介绍Location 对象(即url)属性:
属性 描述
hash 设置或返回从井号 (#) 开始的 URL(锚)。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 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(‘/‘)
    };
}
				
时间: 2024-10-24 00:43:22

利用a标签特性解析地址(附加属性说明)的相关文章

利用a标签自动解析URL

很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取.方法就在JS代码里先创建一个 a 标签然后将需要解析的URL赋值给 a 的 href 属性,然后就得到了一切我们想要的了. var a = document.createElement('a'); a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host); 利用这一原理,稍微扩展一下,就

利用 a 标签自动解析 url

很多时候,我们有从 url 中提取域名,查询关键字,变量参数值等的需求,然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取.方法就是先创建一个 a 标签然后将需要解析的 url 赋值给 a 的 href 属性,然后就得到了一切我们想要的了. var a = document.createElement('a'); a.href = 'http://zhuyujia.github.io/?a=1&b=2'; console.log(a.host); // zhuyujia.githu

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

C++ 11新特性解析——《深入理解C++ 11:C++11新特性解析和应用》读书笔记

因为偶然的机会,在图书馆看到<深入理解C++ 11:C++11新特性解析和应用>这本书,大致扫下,受益匪浅,就果断借出来,对于其中的部分内容进行详读并亲自编程测试相关代码,也就有了整理写出这篇读书笔记的基础.C++作为踏入编程的最初语言,一直充满感情,而C++11作为新标准虽然推出一段时间了,却因为总总原因直到现在才去开始真正了解,不过一句话回荡在脑中:当你认为为时已晚的时候,恰恰是最早的时候!从C++98到C++11, C++11标准经历了10几年的沉淀,以全新的姿态迎接新的挑战,长话短说,

P标签特性:不能嵌套块元素

一直以为P标签只是个自带上下外边距的块元素,最近在项目里利用其自带外边距就嵌套了个div包裹的按钮兰到里面.在测试时发现这个P标签被解析成了2套P标签,工具栏被插在2组P标签中间属于同级了. 后经过查询发现,原来P元素是不能包含块级元素(包括P自身)的.The P element represents a paragraph. It cannot contain block-level elements (including P itself).

[Android 新特性] 改进明显 Android 4.4系统新特性解析

Android 4.3发布半年之后,Android 4.4随着新一代Nexus5一起出现在了用户的面前,命名为从之前的Jelly Bean(果冻豆)换成了KitKat(奇巧).这个新系统究竟都有怎样的改进.是否值得升级呢,下面就一次为你呈现Android 4.4 的新特性. KitKat不是老手机的救星 众所周知,Android机型一直存在升级难的问题.新版Android系统对配置的要求越来越高,特别是内 存,动辄1GB的需求,让老机型望洋兴叹.也使得很多廉价手机制造商往往更倾向于采用旧版 An

利用JAXP和DOM4J解析XML

前言 原创文章欢迎转载,请保留出处. 若有任何疑问建议,欢迎回复. 邮箱:[email protected] 解析XML主要有两种思想,一种是SAX(Simple API for XML),另一种是DOM(文档对象模型),其中在J2EE中,提供了JAXP来实现这两种解析,本文主要利用JAXP实现SAX解析,同时介绍时下流行的DOM4J实现DOM解析. SAX解析和DOM解析比较 SAX解析 优点:效率高,当遇到大的XML文件时,不需要扫描完文件就可以操作. 缺点:不能进行RUD操作,每次操作都要

Spring IOC 标签的解析

Spring IOC 标签的解析 上一篇文章说了Spring中的标签包括默认标签和自定义标签两种,本节继续来研究默认标签的解析,parseBeanDefinitions方法为解析标签的总入口 protected void parseBeanDefinitions(Element root, BeanDefinitionParserDelegate delegate) { if (delegate.isDefaultNamespace(root)) { NodeList nl = root.get

PHP(一般标签介绍,标签特性,实体名称,绝对路径与相对路径)

h1:为标题  h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>---标题 <h3>这是标题123</h3>---标题 <p>:段落 常用!<.P > 自动默认一行 基本常用: <strong>  <b>  都为加粗文体 <em>  <cite>  <i> 都为倾斜 &