JavaScript : saisissez le sélecteur du type spécifié (seuls trois sélecteurs CSS simples tels que id, class et tagName sont pris en charge)

Question

1. Écrivez une fonction JavaScript et saisissez un sélecteur du type spécifié (seuls trois sélecteurs CSS simples, id, class et tagName, doivent être pris en charge, pas besoin d'être compatibles avec les sélecteurs combinés)

Le problème est le suivant : je n'arrive pas à comprendre la correspondance régulière suivante, var reg = /^(#)?(.)?(w+)$/img;var regResult = reg.exec(selector);, les détails sont les suivants

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 apart // est le contenu régulier suivi de img qui est la méthode de correspondance régulière
i:ignorCase ignore la casse
m : multiple permet une correspondance sur plusieurs lignes
g:globle effectue une correspondance globale, qui fait référence à la correspondance avec la cible Fin de la chaîne

Contenu régulier : ^(#)?(.)?(w+)$ ^ signifie commencer par xxx $ signifie terminer par xxxx
(#) ? Cela peut être avec ou sans #
(.) ? Cela peut être avec ou sans
(w+) correspond à un ou plusieurs mots

.

Answer 2

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

1. (#)? ID correspondant

2. (.)? Correspondre au nom de la classe

3. (w+) Le reste sont des noms de balises ou des identifiants ou des noms de classe spécifiques dans [1,2]

Answer 3

Xie Yao.

Veuillez vous référer à @trionfo1993

Answer 4

Donnez-vous un fragment dom dans les utilitaires que j'ai écrit

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