ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [javascript] 32. 정규표현식(regular expression) - 자바스크립트 강좌 JS / CSE
      Web/JavaScript 2015. 6. 13. 15:23
      JavaScript Regular Expressions




      1. What Is a Regular Expression?
       정규 표현식(Regular expression)은 검색 패턴의 형태의 일련의 문자의 연속입니다.
       => A regular expression is a sequence of characters that forms a search pattern.

       문자열 데이터를 검색 할 때, 어떤 것을 검색할 지에 대한 검색 패턴을 사용합니다.

       정규 표현식은 단일 문자 혹은 더 복잡한 패턴 일 수 있습니다.

       검색 패턴은 문자열 검색, 문자열 변환 작업에 사용됩니다.



       문법:

      /pattern/modifiers;



       예제:

       

      1
      var patt = /w3schools/i
      		cs







       /w3schools/i 는 정규 표현식입니다.

       w3schools는 패턴입니다.(검색에 사용할)

       i는 수식어입니다.







      2. Using String Methods
       자바스크립트에서, 정규 표현식은 2개의 문자열 메소드에서 주로 사용됩니다: search(), replace()

       search() 메소드는 일치하는 식에 대해 검색하고, 일치하는 위치를 반환합니다.

       replace() 메소드는 패턴이 일치하는 곳의 문자열을 변환하여 반환합니다.


      2-1. Using String search() With a Regular Expression



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>Search a string for "w3Schools", and display the position of the match:</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo"></p>
       
      <script>
      function myFunction() {
      var str = "Visit W3Schools!"; 
      var n = str.search(/w3Schools/i);
      document.getElementById("demo").innerHTML = n;
      }
      </script>
       
          </body>
      </html>
       
       
      		cs

       



       

       


       



      2-2. Using String search() With String
       search 메소드는 검색 인자 값으로 문자열을 허용합니다. 문자열 인자 값은 정규 표현식으로 변환됩니다:

       

      1
      2
      3
       
      var str = "Visit W3Schools!";
      var n = str.search("W3Schools");
      		cs





      2-3. Use String replace() With a Regular Expression

        


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>Replace "microsoft" with "W3Schools" in the paragraph below:</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo">Please visit Microsoft!</p>
       
      <script>
      function myFunction() {
      var str = document.getElementById("demo").innerHTML; 
      var txt = str.replace(/microsoft/i,"W3Schools");
      document.getElementById("demo").innerHTML = txt;
      }
      </script>
       
          </body>
      </html>
       
       
       
      		cs

       









      2-4. Using String replace() With a String


       replace() 메소드는 검색 인자 값으로 문자열을 허용합니다.


       

      1
      2
      3
       
      var str = "Visit Microsoft!";
      var res = str.replace("Microsoft", "W3Schools");
      		cs










      3. Regular Expression Modifiers

       

      ModifierDescription
      iPerform case-insensitive matching
      gPerform a global match (find all matches rather than stopping after the first match)
      mPerform multiline matching

       

       [ 출처: W3Schools ]





      4. Regular Expression Patterns 


      ExpressionDescription
      [abc]Find any of the characters between the brackets
      [0-9]Find any of the digits between the brackets
      (x|y)Find any of the alternatives separated with |

       [ 출처: W3Schools ]






       Metacharacters 는 특별한 의미를 지닌 문자입니다:

      MetacharacterDescription
      \dFind a digit
      \sFind a whitespace character
      \bFind a match at the beginning or at the end of a word
      \uxxxxFind the Unicode character specified by the hexadecimal number xxxx

       [ 출처: W3Schools ]




       Quantifiers는 수량을 나타냅니다::
       

      QuantifierDescription
      n+Matches any string that contains at least one n
      n*Matches any string that contains zero or more occurrences ofn
      n?Matches any string that contains zero or one occurrences of n
       [ 출처: W3Schools ]







      5. Using the RegExp Object


       자바스크립트에서, RegExp 객체는 미리 정의된 속성과 메소드의 정규 표현식 객체 입니다.






      5-1. Using test()
       test() 메소드는 RegExp 식 메소드 입니다.

       이 메소드는 문자열의 패턴을 검색하고, 참, 거짓 값을 반환합니다.



       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>Search for an "e" in the next paragraph:</p>
       
          <p id="p01">The best things in life are free!</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo"></p>
       
      <script>
      function myFunction() {
      text = document.getElementById("p01").innerHTML; 
      document.getElementById("demo").innerHTML = /e/.test(text);
      }
      </script>
       
          </body>
      </html>
       
      		cs














      5-2. Using exec()
       exec() 메소드는 RegExp 식 메소드 입니다.

       이 메소드는 특정 패턴으로 된 문자열을 찾아서, 찾은 문자열을 반환합니다.

       아무것도 발견되지 않으면, null을 반환합니다.

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
       
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>Search for an "e" in the next paragraph:</p>
       
          <p id="p01">The best things in life are free!</p>
       
          <button onclick="myFunction()">Try it</button>
       
          <p id="demo"></p>
       
      <script>
      function myFunction() {
      text = document.getElementById("p01").innerHTML; 
      document.getElementById("demo").innerHTML = /e/.exec(text);
      }
       
      </script>
       
          </body>
      </html>
       
      		cs







        



      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 35. 끌어올리기(Hoisting) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 34. 디버깅(debugging) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 33. 에러 - try/catch 문(Error - try / catch throw) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 31. 형 변환(type conversion) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 30. 타입, 널(type of, null, undefined) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 29. break문 & continue문 - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바