Question

有人可以帮我解释这个JavaScript正则表达式吗？

new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ')

Answer 1

(             Either
  ^               the start of the string
|               or
  \\s+            one or more whitespace characters
)             followed by
className       the class name in question
(             followed by either
  \\s+          one or more whitespace characters
|             or
  $             the end of the string
)

所以它会匹配“pog”：

"pog"
"  pog"
"pog  "
"pog bim"
"bim pog"
"  pog bim"
"bim pog  "
"bim pog pam"

等

new RegExp()的第二个参数可以给出选项，例如。 “我”的意思是“不区分大小写”。在你的情况下，你没有传递任何选项（如果你正在处理HTML类名，这是正确的 - 类名应该区分大小写）。

Answer 2

RichieHindle有一个很好的答案。我只想添加一些关于此模式目的的信息。

当您检查元素是否具有给定的CSS类时，您希望避免误报。如果你的正则表达式太简单了，就像这样

var pattern = new RegExp( className );

然后，具有类“fooBar”的元素将对类“foo”的检查测试为正。这里存在这些边界子模式以防止这种情况。这是一个实际的演示

<div id="test1" class="red big">My class is "red big"</div>
<div id="test2" class="red-and-big green">My class is "red-and-big green"</div>
<textarea id="output" rows="10" cols="60"></textarea>

<script type="text/javascript">

    var ta = document.getElementById( 'output' );
    var test1 = document.getElementById( 'test1' );
    var test2 = document.getElementById( 'test2' );

    function hasCssClass( classList, className )
    {
        var pattern = new RegExp( "(^|\\s+)" + className + "(\\s+|$)" );
        return pattern.test( classList );
    }

    function testElement( elem, className )
    {
        var has = hasCssClass( elem.className, className )
        ta.value += elem.id + ' ' + ( has ? 'has' : 'does not have' ) + ' ' + className + "\n";
    }

    testElement( test1, 'red' );
    testElement( test1, 'green' );
    testElement( test1, 'big' );
    testElement( test1, 'red-and-big' );

    testElement( test2, 'red' );
    testElement( test2, 'big' );
    testElement( test2, 'green' );
    testElement( test2, 'red-and-big' );


</script>

Answer 3

看起来它正在寻找类名。

匹配换行符或空格(^|\s)的开头，然后是类名，然后类名后面可以跟一个空格或行尾($|\s)。

Answer 4

它在以空格分隔的列表中搜索classname的内容。它似乎是为了解析DOM元素的className属性。

Answer 5

匹配该类名称前面的开头（^）或空格（\\s），然后是它后面的空格或结尾（$）。

Answer 6

第一个片段匹配空格或字符串的开头。最后一个片段类似地匹配空格或字符串的结尾。这样做是为了检查类名“foo”与只有类名为“foobar”的元素不匹配。

Answer 7

w3schools有一些很棒的介绍，并为各种开发主题尝试自己的教程。查看http://www.w3schools.com/js/js_obj_regexp.asp

然后为模式匹配寻找你喜欢的备忘单，我总是以http://regexlib.com/CheatSheet.aspx

结束

希望这些网站能够提供帮助。

有人可以帮我解释这个JavaScript正则表达式吗？

7 个答案: