JavaScript: Enter the selector of the specified type (only three simple CSS selectors such as id, class, and tagName are supported)-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

PHP中文网 2017-06-26 10:57:53

948

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

PHP中文网

认证0级讲师

reply all (4)

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

/^(#)?(.)?(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

Like+0

Add Reply

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

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

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

Like+0

Add Reply

ringa_lee2017-06-26 10:59:53 2 floor

Xie Yao.

Please refer to @trionfo1993

Like+0

Add Reply

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

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

Like+0

Add Reply