有人可以为我解释一下这个 JavaScript 正则表达式吗？答案

【问题标题】：Can someone please explain this JavaScript regular expression for me?有人可以为我解释一下这个 JavaScript 正则表达式吗？
【发布时间】：2009-06-24 20:22:46
【问题描述】：

谁能帮我解释一下这个 JavaScript 正则表达式？

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

【问题讨论】：

这不是更简单吗："\\b" + className + "\\b" ？
@Manu - 没有。这样做很诱人，但破折号是 CSS 类名中的有效字符。而且，无论好坏，破折号都被单词边界包围。

标签： javascript regex

【解决方案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" in:

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

等等

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

【讨论】：

我相信这也会将括号内的内容隐藏起来以供回顾，无论如何这不会给你太多。
@Tom - 正确。您可以使用 ?: 修改子模式以防止匹配捕获，但在这种情况下并不真正需要。

【解决方案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>

【讨论】：

【解决方案3】：

看起来它正在寻找类名。

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

【讨论】：

【解决方案4】：

它在空格分隔的列表中搜索classname 的内容。好像是用来解析DOM元素的className属性的。

【讨论】：

【解决方案5】：

如果类名前面有开头 (^) 或空格 (\\s)，之后是空格或结尾 ($)，则匹配该类名。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

w3schools 为各种开发主题提供了一些很棒的介绍和尝试教程。查看http://www.w3schools.com/js/js_obj_regexp.asp

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

结尾

希望这些网站有所帮助。

【讨论】：