차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_regexp [2021/04/22 12:38]
emblim98 [The source of this article]
+++ wiki:javascript:javascript_note:js_regexp [2023/01/13 18:44] (현재)
@@ 줄 35: / 줄 35: @@
 </code>
 \\
-예제 설명:\\
-**/w3schools/i**는 정규식(정규표현식)입니다.\\
-\\
-**w3schools**는 (검색에서 사용되는) 패턴입니다.\\
-\\
-**i**는 (대소문자를 구분하지 않는70%>
+예제 설명:\\
-=====What is a Regular Expression?=====
-정규식(Regular Expression, 정규 표현식)은 검색 패턴을 형성하는 연속된 문자와 기호입니다.\\
-\\
-텍스트에서 데이터를 검색할 때, 정규식 검색 패턴을 사용하여 찾고 있는 것을 나타낼 수 있습니다.\\
-\\
-정규식은 단일 문자이거나 더 복잡한 패턴이 될 수 있습니다.\\
-\\
-정규식을 사용하여 모든 유형의 **텍스트 검색(text search)** 및 **텍스트 바꾸기(text replace)** 작업을 할 수 있습니다.\\
-\\
-=====Syntax=====
-<code javascript>
-/pattern/modifiers;
-</code>
-====Example====
-<code javascript>
-var patt = /w3schools/i;
-</code>
-\\
-예제 설명:\\
 **/w3schools/i**는 정규식(정규표현식)입니다.\\
 \\
@@ 줄 72: / 줄 45: @@
 =====Using String Methods=====
 %%JavaScript%%에서, 정규식은 종종 ''search()'' 및 ''replace()''의 두 가지 **문자열 메서드**와 함께 사용됩니다.\\
 \\
@@ 줄 121: / 줄 95: @@
 =====Using String replace() With a String=====
+''replace()'' 메서드는 지정된 값을 문자열의 다른 값으로 바꿉니다.\\
+\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+  <h2>JavaScript String Methods</h2>
+  <p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
+  <button onclick="myFunction()">Try it</button>
+  <p id="demo">Please visit Microsoft!</p>   <!-- Please visit W3Schools! -->
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace("Microsoft", "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
+</body>
+</html>
+</code>
+=====Use String replace() With a Regular Expression=====
+대소문자를 구분하지 않는 정규식(a case insensitive regular expression)을 사용하여 Microsoft를 문자열에서 W3Schools로 바꿉니다.\\
+\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+  <h2>JavaScript Regular Expressions</h2>
+  <p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
+  <button onclick="myFunction()">Try it</button>
+  <p id="demo">Please visit Microsoft and Microsoft!</p>
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace(/microsoft/i, "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
+</body>
+</html>
+</code>
+=====Did You Notice?=====
+  위의 메서드에서, 정규식 인수(문자열 인수 대신)를 사용할 수 있습니다.
+  정규식은 검색을 훨씬 더 강력하게 만들 수 있습니다 (예 : 대소 문자를 구분하지 않음).
+=====Regular Expression Modifiers=====
+**변경자(Modifiers)**를 사용하여 대소문자를 구분하지 않는 전역검색을 할 수 있습니다.\\
+\\
+^ Modifier  ^ Description                                  ^
+| %%i%%     | 대소문자를 구분하지 않는 매칭을 합니다.                       |
+| %%g%%     | 전역 매칭을 합니다(첫 번째 매칭 이후에 중단되지 않고 모든 매칭을 찾습니다)  |
+| %%m%%     | 여러 줄의 매칭을 합니다.                               |
+\\
+====Example of i modifier====
+<code javascript>
+<script>
+    function myFunction() {
+      let str = "Visit W3Schools";
+      let patt1 = /w3schools/i; /* 대소문자 구분 없이 w3schools를 변수 patt1에 대입 */
+      let result = str.match(patt1);  /* 변수str에서 변수patt1(대소문자 구분 없이 w3schools와 일치하는 것을 변수 result에 대입) */
+      document.getElementById("demo").innerHTML = result; /* 변수 result를 id="demo"를 가진 p요소에 출력 */
+    }
+  </script>
+</code>
+====Example of g modifier====
+<code javascript>
+<script>
+    function myFunction() {
+      let str = "Is this all there is?";
+      let patt1 = /is/g;  /* 대소문자 구분없이 검색 */
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result;
+    }
+</code>
+====Example of m modifier====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "\nIs th\nis it?";
+      let patt1 = /^is/m;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result;  /* is */
+    }
+  </script>
+</code>
+=====Regular Expression Patterns=====
+괄호는 문자의 범위를 찾는 데 사용합니다:\\
+\\
+^ Expression  ^ Description                     ^
+| %%[abc]%%   | 대괄호 사이에 있는 문자와 동일한 문자를 찾습니다.            |
+| %%[0-9]%%   | 대괄호 사이에 있는 숫자를 찾습니다.                         |
+| %%(x|y)%%   | %%|%%로 구분된 alternatives를 찾습니다.                     |
+====Example of [abc] pattern====
+<code javascript>
+<script>
+    function myFunction() {
+      let str = "Is this all there is?";
+      let patt1 = /[h]/g;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* h,h */
+    }
+</script>
+</code>
+====Example of [0-9] pattern====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "123456789";
+      let patt1 = /[1-4]/g; /* 변수 str에서 1~4까지의 숫자를 변수 patt1에 대입 */
+      var result = str.match(patt1);  /* 변수 patt1과 일치하는 것을 변수 str에서 찾아서 변수 result에 대입 */
+      document.getElementById("demo").innerHTML = result; /* 1,2,3,4 */
+    }
+  </script>
+</code>
+====Example of (x|y) pattern====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "re, green, red, green, gren, gr, blue, yellow";
+      let patt1 = /(red|green)/g;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* green,red,green */
+    }
+  </script>
+</code>
+=====Metacharacters are characters with a special meaning:====
+Metacharacter(메타문자) : 다른 문자의 정보를 운반하기 위해 프로그램 소스나 데이터에 끼워 넣는 문자\\
+\\
+^ Metacharacter  ^ Description                                                                      ^
+| %%\d%%         | 숫자(digit)를 찾습니다. digit: 0에서 9까지의 10개 숫자를 나타내는 기호                     |
+| %%\s%%         | 공백문자 (whitespace character)를 찾습니다                                                |
+| %%\b%%         | %%\ bWORD%%와 같이 단어의 시작 부분에서 일치 항목을 찾거나 또는 %%WORD \ b%%처럼 단어의 끝 부분에서 일치 항목을 찾습니다  |
+| %%\uxxx%%      | 16 진수 %%xxxx%%로 지정된 유니 코드 문자를 찾습니다.                                              |
+====Example of Metachatacters ( \d )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "Give 100%!";
+      let patt1 = /\d/g;  /* 숫자를 찾는 \d 정규식을 변수 patt1에 대입 */
+      let result = str.match(patt1);  /* 변수 str에서 변수 patt1과 일치하는 것을 변수 result에 대입 */
+      document.getElementById("demo").innerHTML = result; /* 1,0,0 */
+    }
+  </script>
+</code>
+====Example of Metacharacters ( \s )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "Is this all there is?";
+      let patt1 = /\s/g;  /* 공백 (whitespace)를 검색 */
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* [" ", " ", " ", " "] */
+      console.log(result, result.length);
+    }
+  </script>
+</code>
+====Exmaple of Metacharacters ( \b )====
+<code javascript>
+  <script>
+    let str = "HELLO, LOOK AT YOU!";
+    let patt1 = /\bLO/; /* LO로 시작하는 단어를 검색 */
+    let result = str.search(patt1);
+    document.getElementById("demo").innerHTML = result; /* Found in position: 7 */
+    console.log(result, result.length); /* 7 undefined */
+  </script>
+</code>
+====Exmaple of Metacharacters ( \b )====
+<code javascript>
+  <script>
+    let str = "HELLO, LOOK AT YOU";
+    let patt1 = /LO\b/; /* 단어의 끝 부분에 LO가 들어가는 것을 검색 */
+    let result = str.search(patt1);
+    document.getElementById("demo").innerHTML = result; /* Found in position: 3 */
+  </script>
+</code>
+====Example of Metacharacters ( \uxxxx )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "Visit W3Schools. Hello World!";
+      let patt1 = /\u0057/g;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* W,W */
+    }
+  </script>
+</code>
+=====Quantifiers define quantities=====
+^ Quantifier  ^ Description                                             ^
+| %%n+%%      | 최소 하나의 n을 포함하는 모든 문자열과 일치합니다.        |
+| %%n*%%      | n이 0개 이상 포함된 모든 문자열과 일치합니다.             |
+| %%n?%%      | n이 0개 또는 1개 포함된 모든 문자열과 일치합니다.         |
+====Example of Quantifiers ( n+ )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "Hellooo World! Hello W3Schools!";
+      let patt1 = /o+/g;  /* 각 단어에서 o가 들어간 만큼 표시 */
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* ooo,o,o,oo */
+    }
+  </script>
+</code>
+====Example of Quantifiers ( n* )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "Hellooo World! Hello W3Schools!";
+      let patt1 = /lo*/g;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* l,looo,l,l,lo,l */
+    }
+  </script>
+</code>
+====Example of Quantifiers ( n? )====
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "1, 100 or 1000?";
+      let patt1 = /10?/g;
+      let result = str.match(patt1);
+      document.getElementById("demo").innerHTML = result; /* 1,10,10 */
+    }
+  </script>
+</code>
+=====Using the RegExp Object=====
+%%JavaScript%%에서 %%RegExp%% 오브젝트는 미리 정의된 속성 및 메서드가 있는 정규식 오브젝트입니다.\\
+=====Using test()=====
+''test()'' 메서드는 %%RegExp%%(정규식) 메서드입니다.\\
+\\
+문자열에서 패턴을 검색하고, 결과에 따라 %%true%% 또는 %%false%%를 반환합니다.\\
+\\
+다음 예제는 문자열에서 %%"e"%% 문자를 검색합니다.\\
+====Example====
+<code javascript>
+var patt = /e/;
+patt.test("The best things in life are free!");
+</code>
+\\
+문자열에 %%"e"%%가 있으므로, 상기 코드의 출력값은 %%true%%입니다.\\
+\\
+먼저 정규식을 변수에 넣을 필요가 없습니다. 위의 두 줄을 아래와 같이 한 줄로 줄일 수 있습니다.\\
+\\
+<code javascript>
+/e/.test("The best things in life are free!");
+</code>
+\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+  <h2>JavaScript Regular Expressions</h2>
+  <p>Search for an "e" in the next paragraph:</p>
+  <p id="p01">The best things in life are free!</p>
+  <p id="demo"></p>
+  <script>
+    text = document.getElementById("p01").innerHTML;
+    document.getElementById("demo").innerHTML = /e/.test(text);
+  </script>
+</body>
+</html>
+</code>
+\\
+=====Using exec()=====
+''exec()'' 메서드는 %%RegExp%% 정규식 메서드입니다.\\
+\\
+문자열에서 지정된 패턴을 검색하고, 찾은 텍스트를 오브젝트로 반환합니다.\\
+\\
+일치하는 항목이 없으면, 빈 %%(null)%% 개체를 반환합니다.\\
+\\
+다음 예제는 문자열에서 "e" 문자를 검색합니다.\\
+====Example====
+<code javascript>
+  <script>
+    let obj = /e/.exec("The best things in life are free!");
+    document.getElementById("demo").innerHTML = "Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
+    /* Found e in position 2 in the text: The best things in life are free! */
+  </script>
+</code>
+=====Complete RegExp Reference=====
+전체 참조를 보려면 [[https://www.w3schools.com/jsref/jsref_obj_regexp.asp|Complete JavaScript RegExp Reference]]로 이동하십시오.\\
+\\
+모든 %%RegExp%% 속성 및 메서드에 대한 설명과 예제가 포함되어 있습니다.\\
 {{tag>오션 Javascript Regular Expressions}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구