Может кто-нибудь объяснить, пожалуйста, это регулярное выражение JavaScript для меня?

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

Соответствует этому имени класса, если перед ним стоит начало (^) или пробел (\\s) перед ним, а после него идет пробел или конец ($).

Answer 5

Поиск содержимого classname в списке, разделенном пробелами. Похоже, это было сделано для анализа свойства className элементов DOM.

Answer 6

В w3schools есть отличное вступление и попробуйте учебные пособия на все темы. Проверить http://www.w3schools.com/js/js_obj_regexp.asp

А затем для сопоставления с образцом ищите шпаргалку, которая вам нравится, Я всегда заканчивал на http://regexlib.com/CheatSheet.aspx

надеюсь, что эти сайты помогут.

Answer 7

Первый фрагмент соответствует либо пробелу, либо началу строки. Последний фрагмент аналогично соответствует пробелу или концу строки. Это сделано для того, чтобы проверка имени класса «foo» не соответствовала элементу, единственным именем класса которого является «foobar».