Home  >  Q&A  >  body text

对于正则不是很熟

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
#div1{color:red; font-size:30px;}
.active{ background:black;}
</style>
<body>

<div id="div1" class="actived" onClick="highlight(this)">123456789</div>

<script type="text/javascript">
function highlight(e){
        
    var str=e.className;
    var re=/active/;
    if(re.test(str)==true){
        e.className=str;
    }else{
        e.className+=" active";
    }
}
</script>
</body>
</html>

这是一个点击添加class改变样式的函数,当被点击的标签为空时会添加active,而当它已经含有时就不需要继续添加,现在是当它class为actived时也被认为是有active,这个问题该怎么解决?

高洛峰高洛峰2922 days ago619

reply all(4)I'll reply

  • 欧阳克

    欧阳克2016-11-10 15:45:50

    re = /active(?!d)/
    正则前瞻,active后面不跟d


    reply
    0
  • 三叔

    三叔2016-11-10 15:45:15

    /^active$/ 只匹配active

    但是你为什么不适用classList呢?自带has,add,remove,contain方法


    reply
    0
  • 欧阳克

    欧阳克2016-11-10 15:45:03

    你这个元素的class如果写的比较规范的话,那么active后面跟的应该是行尾,你把re改一下,

    re = /active$/


    reply
    0
  • 三叔

    三叔2016-11-10 15:44:47

    re = /active(?!d)/?!n :匹配任何其后没有紧接指定字符串 n 的字符串。

    reply
    0
  • Cancelreply