为什么去掉正则表达式pattern里面的括号,整个页面都变成黄色而不是报错?
来源:3-32 位置匹配之单词边界匹配
嘿曼
2018-08-18 23:08:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用正则表达式兼容ClassName获取dom</title>
</head>
<body>
<p>
<div class="odd odd1">1</div>
<div class="even">2</div>
<div class="odd">3</div>
<div class="even">4</div>
</p>
<script type="text/javascript">
var getByClassName =function(className,parentNode){
if(!document.getElementsByClassName(className)){
return document.getElementsByClassName(className);
}else{console.log(1);
var parentNode = parentNode || document;
var nodeList = [];
var pattern = new RegExp('(^|\\s+)'+className+'($|\\s+)');
var allNodes = parentNode.getElementsByTagName('*');
for(var i=0; i<allNodes.length; i++){
if(pattern.test(allNodes[i].className)){
console.log(pattern.test(allNodes[i].className));
console.log(pattern.exec(allNodes[i].className));
nodeList.push(allNodes[i]);
console.log(2);
}
}
return nodeList;
}
}
var odd = getByClassName('odd');
var even = getByClassName('even');
for(var i=0; i<odd.length; i++){
odd[i].style.backgroundColor = 'red';
}
for(var i=0; i<even.length; i++){
even[i].style.backgroundColor = 'yellow';
}
</script>
</body>
</html>
为什么去掉正则表达式pattern里面的括号,整个页面都变成黄色而不是报错?
函数getByClassName第二个参数有意义吗?到底怎么传第二个参数。不可能直接传一个标签名吧?
1回答
不写正则匹配不到类名,如果正则里面为空可以匹配任何字符串,它匹配了所有的标签所以会html页面变为黄色
第二个参数需要传的是 dom,如果通过原生api可以获取对应类名的dom就用正则匹配
祝学习愉快!
相似问题