shorthair

娜娜，你知道吗，你就像一直野猫，活的高傲又自由，却背负着无法痊愈的伤口。

粗线条的我，曾经认为这样很酷，却不知道那有多么的痛。

                                                    by NANA

使用文档

##shorthair是什么

shorthair是一个严格遵循w3c关于css3-selector的文法约定(@w3c selector grammar)的语法解析器，基于@jcon项目实现。

##shorthair的使用示例

/**
 * example
 *
 * selector 1: div.class#id
 *
 * selector 2: a[link^="http://"]
 *
 * selector 3: ns|section>ns|*[ns|link^="http"]
 *
 * selector 4: ul.news>li:nth-child(2n-1)
 *
 * selector 5: *.content>ns|div a[link^="http://"]:not([target=_blank]):first-child
 *
 *
 *
 */
(function(){

    var shorthair = require('../src/shorthair');


    //对 "div.class#id" 的解析
    var selector = 'div.class#id';
    var selParseTree = shorthair.parse(selector);
    var selAstTree = selParseTree.ast();
    JSON.stringify(selAstTree) === JSON.stringify([
        {
            type: 'element_name',
            value: 'div'
        },
        {
            type: 'class',
            value: '.class'
        },
        {
            type: 'hash',
            value: '#id'
        },
    ]) ? console.log(selector + ' PASSED!') : console.log(JSON.stringify(selAstTree, null, '  '));




    //对 "a[link^="http://"]" 的解析
    var selector = 'a[link^="http://"]';
    var selParseTree = shorthair.parse(selector);
    var selAstTree = selParseTree.ast();
    JSON.stringify(selAstTree) === JSON.stringify([
        {
            type: 'element_name',
            value: 'a'
        },
        {
            type: 'attrib',
            value: '[link^="http://"]',
            childs: [
                {
                    type: 'name',
                    value: 'link'
                },
                {
                    type: 'operator',
                    value: '^='
                },
                {
                    type: 'value',
                    value: '"http://"'
                },
            ]
        }
    ]) ? console.log(selector + ' PASSED!') : console.log(JSON.stringify(selAstTree, null, '  '));





    //对 "ns|section>ns|*[ns|link^="http://"]" 的解析
    var selector = 'ns|section>ns|*[ns|link^="http://"]';
    var selParseTree = shorthair.parse(selector);
    var selAstTree = selParseTree.ast();
    JSON.stringify(selAstTree) === JSON.stringify([
        {
            type: 'element_name',
            value: 'ns|section',
            childs: [
                {
                    type: 'namespace',
                    value: 'ns'
                },
                {
                    type: 'element_name',
                    value: 'section'
                }
            ]
        },
        {
            type: 'combinator',
            value: '>'
        },
        {
            type: 'universal',
            value: 'ns|*',
            childs: [
                {
                    type: 'namespace',
                    value: 'ns'
                },
                {
                    type: 'universal',
                    value: '*'
                }
            ]
        },
        {
            type: 'attrib',
            value: '[ns|link^="http://"]',
            childs: [
                {
                    type: 'namespace',
                    value: 'ns'
                },
                {
                    type: 'name',
                    value: 'link'
                },
                {
                    type: 'operator',
                    value: '^='
                },
                {
                    type: 'value',
                    value: '"http://"'
                },
            ]
        }
    ]) ? console.log(selector + ' PASSED!') : console.log(JSON.stringify(selAstTree, null, '  '));


    //对 "ul.news>li:nth-child(2n-1)" 的解析
    var selector = 'ul.news>li:nth-child(2n-1)';
    var selParseTree = shorthair.parse(selector);
    var selAstTree = selParseTree.ast();
    JSON.stringify(selAstTree) === JSON.stringify([
        {
            type: 'element_name',
            value: 'ul'
        },
        {
            type: 'class',
            value: '.news'
        },
        {
            type: 'combinator',
            value: '>'
        },
        {
            type: 'element_name',
            value: 'li'
        },
        {
            type: 'pseudo',
            value: ':nth-child(2n-1)',
            childs: [
                {
                    type: 'expression',
                    value: '2n-1'
                },
            ]
        }
    ]) ? console.log(selector + ' PASSED!') : console.log(JSON.stringify(selAstTree, null, '  '));




    //对 "*.content>ns|div a[link^="http://"]:not([target=_blank]):first-child" 的解析
    var selector = '*.content>ns|div a[link^="http://"]:not([target=_blank]):first-child';
    var selParseTree = shorthair.parse(selector);
    var selAstTree = selParseTree.ast();
    JSON.stringify(selAstTree) === JSON.stringify([
        {
            type: 'universal',
            value: '*'
        },
        {
            type: 'class',
            value: '.content'
        },
        {
            type: 'combinator',
            value: '>'
        },
        {
            type: 'element_name',
            value: 'ns|div',
            childs: [
                {
                    type: 'namespace',
                    value: 'ns'
                },
                {
                    type: 'element_name',
                    value: 'div'
                }
            ]
        },
        {
            type: 'combinator',
            value: ' '
        },
        {
            type: 'element_name',
            value: 'a'
        },
        {
            type: 'attrib',
            value: '[link^="http://"]',
            childs: [
                {
                    type: 'name',
                    value: 'link'
                },
                {
                    type: 'operator',
                    value: '^='
                },
                {
                    type: 'value',
                    value: '"http://"'
                },
            ]
        },
        {
            type: 'negation',
            value: ':not([target=_blank])',
            childs: [
                {
                    type: 'attrib',
                    value: '[target=_blank]',
                    childs: [
                        {
                            type: 'name',
                            value: 'target'
                        },
                        {
                            type: 'operator',
                            value: '='
                        },
                        {
                            type: 'value',
                            value: '_blank'
                        }
                    ]
                }
            ]
        },
        {
            type: 'pseudo',
            value: ':first-child'
        }
    ]) ? console.log(selector + ' PASSED!') : console.log(JSON.stringify(selAstTree, null, '  '));



}());

##关于作者

cc，曾就职于百度，奇虎360，目前就职于阿里巴巴集团无线事业部。

[email protected]