JavaScript:輸入指定類型的選擇器(僅需支持id,class,tagName三種簡單CSS選擇器)
問題描述
1.編寫一個(gè)JavaScript函數(shù),輸入指定類型的選擇器(僅需支持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]) { ... }//如果是標(biāo)簽選擇器else if(regResult[3]) { ... }}
問題解答
回答1:/^(#)?(.)?(w+)$/img拆一下 //之間的是正則的內(nèi)容 后面img是正則的匹配方式i:ignorCase忽略大小寫m:mutiple允許多行匹配g:globle進(jìn)行全局匹配,指匹配到目標(biāo)串的結(jié)尾
正則內(nèi)容:^(#)?(.)?(w+)$ ^代表以xxx開頭 $代表以xxxx結(jié)尾(#)?可以帶一個(gè)或者不帶#(.)? 可以帶.或者沒有.(w+) 匹配一個(gè)或多個(gè)單詞
回答2:/^(#)?(.)?(w+)$/img
(#)? 匹配ID的
(.)? 匹配className
(w+) 剩下都是標(biāo)簽名或者[1,2]中具體的ID或者className名稱
回答3:謝遙。
請參考 @trionfo1993
回答4:給你一個(gè),我寫的utils中的dom片段
class dom extends base{ constructor(){super(); } // 根據(jù)ID獲取指定DOM byId(_id){return document.getElementById(string.replace(_id,’#’,’’)); } // 根據(jù)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; } // 根據(jù)Name獲取相關(guān)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]; } // 基礎(chǔ)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’); }
相關(guān)文章:
1. java - 想使用別人項(xiàng)目中maven引入的jar包,就是那個(gè).class文件,要怎么操作?2. angular.js - angularjs中 選中checkbox其上一級加入一個(gè)classname,取消選中去掉classname3. 為什么autoloader.php文件能知道 $className 代表test4. python中class里面的self是什么意思?5. macos - idea用maven編譯成功,但總有提Class JavaLaunchHelper is implemented in both6. java - log4j2 在servlet3.1下報(bào)錯(cuò)NoClassDefFoundError7. java - 為什么Serializable中定義的Class 不能序列化?8. class類共享變量問題9. java - springboot使用容器加載時(shí),如何預(yù)先獲取ClassLoader資源?10. DADB.class.php文件的代碼怎么寫
