搜索

首页  >  问答  >  正文

JavaScript:输入指定类型的选择器(仅需支持id,class,tagName三种简单CSS选择器)

1.编写一个JavaScript函数,输入指定类型的选择器(仅需支持id,class,tagName三种简单CSS选择器,无需兼容组合选择器)

问题是:下面的正则匹配看不懂,var reg = /^(#)?(.)?(w+)$/img;var regResult = reg.exec(selector);,具体如下

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id选择器
                if(regResult[1]) {
                    ...
                }
                //如果是class选择器
                else if(regResult[2]) {
                    ...
                      
                }
                //如果是标签选择器
                else if(regResult[3]) {
                    ...
            }
}
       
PHP中文网PHP中文网2736 天前1047

全部回复(4)我来回复

  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:59:53

    /^(#)?(.)?(w+)$/img
    拆一下 //之间的是正则的内容 后面img是正则的匹配方式
    i:ignorCase忽略大小写
    m:mutiple允许多行匹配
    g:globle进行全局匹配,指匹配到目标串的结尾

    正则内容:^(#)?(.)?(w+)$ ^代表以xxx开头 $代表以xxxx结尾
    (#)?可以带一个或者不带#
    (.)? 可以带.或者没有.
    (w+) 匹配一个或多个单词

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-26 10:59:53

    /^(#)?(.)?(w+)$/img

    1. (#)? 匹配ID的

    2. (.)? 匹配className

    3. (w+) 剩下都是标签名或者[1,2]中具体的ID或者className名称

    回复
    0
  • ringa_lee

    ringa_lee2017-06-26 10:59:53

    谢遥。

    请参考 @trionfo1993

    回复
    0
  • 迷茫

    迷茫2017-06-26 10:59:53

    给你一个,我写的utils中的dom片段

    class dom extends base{
    
        constructor(){
            super();
        }
        // 根据ID获取指定DOM
        byId(_id){
            return document.getElementById(string.replace(_id,'#',''));
        }
        // 根据ID或Class获取DOM
        get(_id){
            if(_id.indexOf('.') > -1){
                let list = document.getElementsByClassName(string.replace(_id,'\.',''));
                this._object = Array.from(list);
            }else{
                this._object = [this.byId(_id)];
            }
            
            return this;
        }
        // 根据Name获取相关DOM
        byName(_name){
            let list = document.getElementsByName(_name);
            if(list.length > 0)
                return Array.from(list);
            return null;
        }
        // 返回dom原型
        get valueOf(){
            if(this._object.length >1){
                return this._object;    
            }
            return this._object[0];
        }
        // 基础DOM操作方法
        _dom_ctrols(_func){
            for(let info of this._object){
                _func(info);
            }
            return this;
        }
        // 增加class
        addClass(_name){
            this._dom_ctrols((info)=>{
                if(info.className.indexOf(_name) == -1){
                    info.className += ' ' + _name;
                }
            })
            return this;
        }
        // 删除class
        removeClass(_name){
            this._dom_ctrols((info)=>{
                info.className = string.replace(info.className,_name,'');
            })
            return this;
        }
        // 显示?隐藏DOM主方法
        _hide_show(_value){
            this._dom_ctrols((info)=>{
                info.style.display = _value;
            });
        }
        // 隐藏DOM
        hide(){
            this._hide_show('none');
        }
        // 显示DOM
        show(){
            this._hide_show('block');
        }

    回复
    0
  • 取消回复