JavaScript: Enter the selector of the specified type (only three simple CSS selectors such as id, class, and tagName are supported)

Question

1. Write a JavaScript function and input a selector of the specified type (only three simple CSS selectors such as id, class, and tagName are supported, and there is no need to be compatible with combined selectors)

The problem is: I can’t understand the following regular matching, var reg = /^(#)?(.)?(w )$/img;var regResult = reg.exec(selector); ,details as follows

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]) {
                    ...
            }
}
       

Answer 1

/^(#)?(.)?(w+)$/img
Tear it down //The part between // is the regular content and the following img is the regular matching method
i:ignorCase ignores case
m: mutiple allows Multi-line matching
g: global matching by glob means matching to the end of the target string

Regular content: ^(#)?(.)?(w+)$ ^ means starting with xxx $ means ending with xxxx
(#)? You can bring one or not #
(.)? You can bring it. Or None.
(w+) matches one or more words

Answer 2

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

1. (#)? matching ID

2. (.)? matches className

3. (w+) The rest are tag names or specific ID or className names in [1,2]

Answer 3

Xie Yao.

Please refer to @trionfo1993

Answer 4

Give you a dom fragment in utils I wrote

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');
    }