有人能爲我解釋這個JavaScript正則表達式嗎？

Question

有人能爲我解釋這個JavaScript正則表達式嗎？

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

Answer 1

看起來像是在尋找類名。

匹配換行或空白(^|\s)的開始，則類名，則類名可以後跟一個空格或線($|\s)的末尾。

Answer 2

它以空白分隔的列表搜索classname的內容。它似乎是解析DOM元素的className屬性。

Answer 3

如果該類名前面有開頭（^）或前面的空格（\\s），並且後面跟着空格或結尾（$），則匹配該類名。

Answer 4

第一個片段匹配空格或字符串的開頭。最後一個片段類似地匹配空格或字符串的結尾。這樣做是爲了檢查類名「foo」與只有類名爲「foobar」的元素不匹配。

Answer 5

(   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 6

w3schools有一些很棒的介紹和嘗試自己的各種發展主題的教程。 退房http://www.w3schools.com/js/js_obj_regexp.asp

然後爲你喜歡的小抄， 模式匹配的樣子，我總是結束了在http://regexlib.com/CheatSheet.aspx

希望這些網站幫助。

Answer 7

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>