누군가이 자바 스크립트 정규 표현식을 설명해 주시겠습니까?

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()의 두 번째 인수는 예를 들어, 옵션을 제공 할 수 있습니다. "i"는 "대소 문자를 구분하지 않음"을 의미합니다. 귀하의 경우에는 어떤 옵션도 전달하지 않습니다 (HTML 클래스 이름을 다루는 경우 올바른 - 클래스 이름은 대소 문자를 구분하여 처리해야합니다).

Answer 6

w3schools에는 멋진 인트로가 있으며 모든 종류의 개발 주제에 대한 자습서를 사용해보십시오. http://www.w3schools.com/js/js_obj_regexp.asp

을 확인하십시오 그리고 당신이 좋아하는 속임수 시트, 에 대한 패턴 매칭보기를 위해 항상 http://regexlib.com/CheatSheet.aspx

에 결국 이 사이트가 도움이되기를 바랍니다.

Answer 7

RichieHindle은 훌륭한 답변을 제공합니다. 이 패턴의 목적에 대한 정보를 추가하고 싶었습니다.

요소에 지정된 CSS 클래스가 있는지 확인하는 경우 오탐 (false positive)을 방지해야합니다. 당신의 정규 표현식 다음이

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>