JavaScript의 정규 표현식: 소개

인포매텍 디지털 » 프로그래밍 » JavaScript의 정규 표현식: 소개

JavaScript의 정규 표현식에 대한 완전한 가이드에 오신 것을 환영합니다! 이 글에서는 정규 표현식이 무엇인지, JavaScript에서 어떻게 사용하는지, 그리고 정규 표현식이 어떻게 코드를 단순화하고 최적화하는 데 도움이 될 수 있는지 자세히 알아보겠습니다. 기본 사항부터 실제 사례까지, JavaScript 프로젝트에서 정규 표현식을 최대한 활용하는 데 필요한 모든 내용을 다루겠습니다. 그럼 시작해볼까요!

정규 표현식 소개

정규 표현식은 문자열에서 텍스트를 찾고 조작하는 데 사용되는 검색 패턴입니다. 이는 리터럴 문자와 메타문자의 조합으로 구성되며, 텍스트에서 일치 항목을 찾기 위한 특정 규칙을 정의합니다. 이러한 규칙에는 특정 문자, 문자 범위, 반복, 대체 등을 검색하는 것이 포함될 수 있습니다.

JavaScript에서는 정규 표현식은 클래스를 사용하여 생성됩니다. RegExp 또는 문자 그대로를 사용하여 /patrón/. 패턴은 정규 표현식 자체이며, 슬래시로 묶입니다. 간단한 예를 살펴보겠습니다.

const regex = /hola/;

 

이 예제에서 우리는 텍스트 내에서 "hello"라는 문자열을 검색하는 정규 표현식을 만들었습니다. 이제 정규 표현식이 무엇인지에 대한 기본적인 이해를 얻었으므로 JavaScript에서 정규 표현식을 사용하기 위한 몇 가지 주요 개념과 고급 기술을 살펴보겠습니다.

정규 표현식의 기본 구문

JavaScript의 정규 표현식은 보다 복잡한 검색 패턴을 정의할 수 있는 몇 가지 핵심 요소로 구성됩니다. 이러한 요소에는 리터럴 문자, 메타 문자, 문자 클래스, 양화사, 앵커 등이 포함됩니다. 이러한 요소의 몇 가지 예를 살펴보겠습니다.

문자 그대로의 문자

리터럴 문자는 텍스트에 나타나는 대로 검색되는 문자입니다. 예를 들어, 정규 표현식 /hola/ 텍스트 문자열에서 "hello" 문자 시퀀스를 검색합니다. 정규 표현식은 대소문자를 구분한다는 점을 알아두는 것이 중요합니다. /hola/ "Hello" 또는 "HELLO"와는 일치하지 않습니다.

메타 문자

메타문자는 정규 표현식에서 특별한 의미를 갖는 특수 문자입니다. 예를 들어, 메타 문자 . 줄바꿈 문자를 제외한 모든 문자를 나타내는 데 사용됩니다. 또 다른 일반적인 메타 문자는 다음과 같습니다. ^이는 텍스트 문자열의 시작을 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /^hola/ "hello"로 시작하는 모든 텍스트 문자열과 일치합니다.

캐릭터 클래스

문자 클래스는 특정 집합 내에서 모든 문자를 검색하는 데 사용됩니다. 예를 들어, 정규 표현식 /[aeiou]/ 텍스트 문자열의 모든 모음과 일치합니다. 문자 클래스에서 문자 범위를 사용하는 것도 가능합니다. 예를 들어, 정규 표현식 /[a-z]/ 모든 소문자와 일치합니다.

수량자

양화사는 정규 표현식에서 요소가 나타나는 횟수를 지정하는 데 사용됩니다. 예를 들어, 양화사 * 이전 요소가 0번 이상 나타날 수 있음을 나타냅니다. 양화사 + 앞의 요소가 한 번 이상 나타나야 함을 나타냅니다. 예를 들어, 정규 표현식 /a+/ 텍스트 문자열에서 하나 이상의 "a"와 일치합니다.

앵커

앵커는 텍스트 문자열 내에서 일치하는 항목의 위치를 ​​나타내는 데 사용됩니다. 예를 들어 앵커 \b 단어 경계와 일치합니다. 예를 들어, 정규 표현식 /bholab/ "hello"라는 단어만 일치합니다. 전체 단어, "hello"를 일부로 포함하는 긴 단어와 일치하지 않습니다.

이것들은 자바스크립트에서 정규 표현식의 기본 구문을 보여주는 몇 가지 예시일 뿐입니다. 이 글을 진행하면서 자바스크립트에서 정규 표현식을 다루는 더 고급 개념과 기법들을 살펴보겠습니다.

기본 매치 검색

정규 표현식을 사용하여 가장 일반적으로 수행하는 작업 중 하나는 텍스트 문자열에서 일치 항목을 검색하는 것입니다. JavaScript에서는 다음 메서드를 사용할 수 있습니다. search() 텍스트 문자열에서 정규 표현식과 처음으로 일치하는 항목을 찾습니다. 예를 들어 보겠습니다.

const texto = "¡Hola, mundo!";
const regex = /mundo/;
const indice = texto.search(regex);
console.log(indice); // 7

이 예에서 우리는 다음 방법을 사용했습니다. search() 정규 표현식의 첫 번째 일치 항목을 찾으려면 /mundo/ 텍스트 문자열 "Hello, world!" 방법 search() 첫 번째로 발견된 일치 항목의 인덱스를 반환하거나, 일치 항목이 없으면 -1을 반환합니다.

방법 외에도 search()JavaScript는 또한 정규 표현식을 사용하기 위한 기타 유용한 방법을 제공합니다. match(), replace(), split() y test(). 각 방법은 고유한 목적이 있으며, 귀하의 특정 요구 사항에 맞게 사용할 수 있습니다.

수정자와 플래그 사용

JavaScript에서 정규 표현식에는 보다 유연하고 사용자 정의된 검색을 가능하게 하는 수정자와 플래그가 포함될 수 있습니다. 수정자는 정규 표현식의 끝에 추가되어 정규 표현식의 동작을 수정합니다. 가장 일반적인 수정자는 다음과 같습니다.

나 (무감각)

수정자 i 대소문자를 구분하지 않고 검색을 수행하는 데 사용됩니다. 예를 들어, 정규 표현식 /hola/i "hello"와 "Hello" 또는 "HELLO" 둘 다 일치합니다.

g (글로벌)

수정자 g 첫 번째로 발견된 일치 항목에서 멈추는 대신 전체 텍스트 문자열에 대한 글로벌 검색을 수행하는 데 사용됩니다. 예를 들어, 정규 표현식 /a+/g 텍스트 문자열에서 하나 이상의 "a"가 나타나는 모든 부분과 일치합니다.

m (다중줄)

수정자 m 텍스트 문자열 내에서 여러 줄에 대한 검색을 수행하는 데 사용됩니다. 예를 들어, 정규 표현식 /^hola/m 텍스트 문자열의 각 줄의 시작 부분에 있는 "hello"라는 단어와 일치합니다.

수정자 외에도 JavaScript에서는 정규 표현식에서 플래그를 사용할 수도 있습니다. 클래스를 사용하여 정규 표현식을 생성할 때 두 번째 슬래시 뒤에 플래그가 추가됩니다. RegExp. 가장 흔한 플래그는 다음과 같습니다.

나 (무감각)

수정자와 같은 i, 깃발 i 대소문자를 구분하지 않고 검색을 수행합니다. 예를 들어, 정규 표현식 new RegExp("hola", "i") "hello"와 "Hello" 또는 "HELLO" 둘 다 일치합니다.

g (글로벌)

수정자와 같은 g, 깃발 g 전체 텍스트 문자열에 대한 전역 검색을 수행합니다. 예를 들어, 정규 표현식 new RegExp("a+", "g") 텍스트 문자열에서 하나 이상의 "a"가 나타나는 모든 부분과 일치합니다.

m (다중줄)

수정자와 같은 m, 깃발 m 텍스트 문자열 내의 여러 줄에 대해 검색을 수행합니다. 예를 들어, 정규 표현식 new RegExp("^hola", "m") 텍스트 문자열의 각 줄의 시작 부분에 있는 "hello"라는 단어와 일치합니다.

자바스크립트 정규 표현식에서 수정자와 플래그를 사용하면 다양한 경우와 특정 요구 사항에 맞춰 검색을 최적화하는 데 매우 유용합니다. 직접 실험해보고 코드에서 이러한 기능을 최대한 활용하는 방법을 알아보세요.

메타 문자와 특수 문자

메타문자와 특수문자는 정규 표현식의 핵심 요소로, 이를 통해 더 강력하고 유연한 검색을 수행할 수 있습니다. 우리는 이미 다음과 같은 일부 메타문자를 언급했습니다. . y ^하지만 정규 표현식에서 사용할 수 있는 키워드는 훨씬 더 많습니다. 가장 일반적인 메타문자와 특수문자를 살펴보겠습니다.

. (포인트)

메타 캐릭터 . 줄바꿈 문자를 제외한 모든 문자를 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /h.t/ "hat", "hot", "hit" 및 "h"로 시작하고 "t"로 끝나는 다른 세 글자 단어와 일치합니다.

\ (역슬래시)

백슬래시는 정규 표현식에서 특수 문자를 이스케이프하는 데 사용됩니다. 예를 들어, 텍스트 문자열에서 리터럴 마침표를 검색하려면 백슬래시를 사용하여 이스케이프해야 합니다. 정규 표현식 /www\.google\.com/ 텍스트 문자열 "www.google.com"과 일치합니다.

\d (숫자)

메타 캐릭터 \d 0에서 9까지의 모든 숫자를 검색하는 데 사용됩니다. 예를 들어, 정규 표현식은 다음과 같습니다. /\d+/ 텍스트 문자열에 있는 하나 이상의 숫자와 일치합니다.

\w (영숫자 문자)

메타 캐릭터 \w 영숫자 문자(대문자와 소문자, 숫자, 밑줄)를 검색하는 데 사용됩니다. 예를 들어, 정규 표현식 /\w+/ 텍스트 문자열에서 하나 이상의 영숫자로 구성된 단어와 일치합니다.

다음은 정규 표현식에서 사용할 수 있는 메타문자와 특수 문자의 몇 가지 예입니다. JavaScript의 정규 표현식에 익숙해질수록 검색 및 텍스트 조작을 구체화하는 다양한 옵션을 발견하게 될 것입니다.

문자 클래스 및 범위

문자 클래스는 정규 표현식의 또 다른 핵심 요소로, 특정 집합 내에서 모든 문자를 검색할 수 있게 해줍니다. JavaScript에서는 대괄호를 사용할 수 있습니다. [] 문자 클래스를 정의합니다. 문자 클래스와 범위의 몇 가지 예를 살펴보겠습니다.

[아에이우]

캐릭터 클래스 [aeiou] 텍스트 문자열의 모든 모음과 일치합니다. 예를 들어, 정규 표현식 /[aeiou]/ 텍스트 문자열에서 "a", "e", "i", "o", 또는 "u"와 일치합니다.

[az]

문자의 범위 [a-z] 영어 알파벳의 모든 소문자와 일치합니다. 예를 들어, 정규 표현식 /[a-z]/ 텍스트 문자열의 모든 소문자와 일치합니다.

[0-9]

문자의 범위 [0-9] 텍스트 문자열에서 0부터 9까지의 모든 숫자와 일치합니다. 예를 들어, 정규 표현식 /[0-9]/ 모든 한 자리 숫자와 일치합니다.

[A-Za-z]

캐릭터 클래스 [A-Za-z] 영어 알파벳의 대문자나 소문자와 일치합니다. 예를 들어, 정규 표현식 /[A-Za-z]/ 텍스트 문자열의 모든 문자와 일치합니다.

문자 클래스와 범위를 사용하면 정규 표현식에서 검색할 특정 문자 집합을 정의할 수 있습니다. 이를 사용하여 귀하의 특정 요구 사항과 제한 사항에 맞게 검색을 맞춤화하세요.

양화사와 반복

양화사와 반복은 정규 표현식의 핵심 요소로, 텍스트 문자열에서 요소가 나타나는 횟수를 지정하는 데 사용됩니다. JavaScript에서 가장 일반적인 양화사 중 일부를 살펴보겠습니다.

* (별표)

양화사 * 이전 요소가 0번 이상 나타날 수 있음을 나타냅니다. 예를 들어, 정규 표현식 /a*/ 텍스트 문자열에서 'a'가 0개 이상 있는 경우와 일치합니다.

+ (더보기)

양화사 + 앞의 요소가 한 번 이상 나타나야 함을 나타냅니다. 예를 들어, 정규 표현식 /a+/ 텍스트 문자열에서 하나 이상의 "a"와 일치합니다.

? (질문)

양화사 ? 이전 요소가 0번 또는 1번 나타날 수 있음을 나타냅니다. 예를 들어, 정규 표현식 /colou?r/ "color"와 "colour" 둘 다 일치합니다.

{n} (정확히 n번)

양화사 {n} 이전 요소가 정확히 n번 나타나야 함을 나타냅니다. 예를 들어, 정규 표현식 /a{3}/ 텍스트 문자열에서 정확히 세 개의 "a"와 일치합니다.

{n,} (최소 n회)

양화사 {n,} 이전 요소가 최소한 n번 나타나야 함을 나타냅니다. 예를 들어, 정규 표현식 /a{2,}/ 텍스트 문자열에서 두 개 이상의 'a'와 일치합니다.

{n,m}

양화사 {n,m} 이전 요소가 최소한 n번, 최대 m번 나타나야 함을 나타냅니다. 예를 들어, 정규 표현식 /a{2,4}/ 텍스트 문자열에서 "a"가 두 개, 세 개, 네 개 일치하는 경우와 일치합니다.

다음은 정규 표현식에서 사용할 수 있는 양화사의 몇 가지 예입니다. 양화사를 사용하면 텍스트 검색 및 조작에서 반복 패턴을 지정하여 텍스트 문자열에서 특정 정보를 더 쉽게 추출할 수 있습니다.

앵커와 단어 경계

앵커와 단어 경계는 텍스트 문자열 내에서 일치하는 항목의 위치를 ​​나타내는 데 사용되는 요소입니다. 이러한 요소는 전체 단어를 검색하거나 일치 항목이 줄의 시작이나 끝에 있는지 확인할 때 특히 유용합니다. 앵커와 단어 경계의 몇 가지 예를 살펴보겠습니다.

\b (단어 경계)

단어 제한 \b 영숫자 문자와 영숫자가 아닌 문자의 경계와 일치합니다. 예를 들어, 정규 표현식 /\bjavascript\b/ "javascript"라는 단어가 완전한 단어로만 일치하며, "javascript"가 일부로 포함된 긴 단어는 일치하지 않습니다.

^ (줄 시작)

캐릭터 ^ 텍스트 문자열에서 줄의 시작을 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /^hola/ 텍스트 문자열의 각 줄의 시작 부분에 있는 "hello"라는 단어와 일치합니다.

$ (줄의 끝)

캐릭터 $ 텍스트 문자열에서 줄의 끝을 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /mundo$/ 텍스트 문자열의 각 줄 끝에 있는 "world"라는 단어와 일치합니다.

\A (텍스트 시작)

캐릭터 \A 문자열에서 줄의 시작만이 아니라 모든 텍스트의 시작을 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /^\AHola/ 전체 텍스트의 시작 부분에 있는 "Hello"라는 단어와 일치합니다.

\Z (텍스트 끝)

캐릭터 \Z 는 줄의 끝이 아니라 텍스트 문자열에 있는 모든 텍스트의 끝을 나타내는 데 사용됩니다. 예를 들어, 정규 표현식 /Mundo\Z/ 전체 텍스트의 끝에 있는 "World"라는 단어와 일치합니다.

앵커와 단어 경계를 이용하면 텍스트 문자열 내의 특정 위치에서 일치 항목을 검색할 수 있습니다. 이는 일치 항목이 특정 위치에 있는지 확인하고 싶은 상황에서 유용할 수 있습니다.

그룹 및 캡처

그룹과 캡처는 정규 표현식의 고급 요소로, 하위 표현식을 그룹화하고 나중에 사용하기 위해 캡처할 수 있도록 해줍니다. 그룹과 캡처가 어떻게 작동하는지 살펴보겠습니다.

( ) (괄호)

괄호는 그들은 그룹을 사용합니다 정규 표현식 내의 하위 표현식. 예를 들어, 정규 표현식 /(d{2})-(d{2})-(d{4})/ se 날짜를 검색하는 데 사용됨 형식은 "dd-mm-yyyy."입니다. 그룹들 ( ) 이를 통해 일, 월, 년도 값을 별도로 포착할 수 있습니다.

\1, \2, \3 (그룹 참조)

그룹 참조는 정규 표현식에서 이전에 캡처된 그룹을 참조하는 데 사용됩니다. 예를 들어, 정규 표현식 /(\w+) \1/ 동일한 단어가 반복해서 나오는 단어와 일치합니다. 예를 들어, "안녕 안녕", "세상 세상" 등.

?: (비캡처 그룹)

상징 ?: 비포착 그룹을 만드는 데 사용됩니다. 이러한 그룹은 하위 표현식을 그룹화하고 싶지만 결과를 캡처하고 싶지 않을 때 사용됩니다. 예를 들어, 정규 표현식 /https?:\/\/(?:www\.)?google\.com/ "http://www.google.com"과 "https://google.com"을 모두 일치시키지만 URL의 관련 부분만 캡처합니다.

그룹과 캡처를 사용하면 정규 표현식을 보다 효율적이고 읽기 쉬운 방식으로 구조화하고 구성할 수 있습니다. 또한 특정 값을 캡처하여 나중에 애플리케이션에서 사용할 수 있는 기능도 제공합니다.

정규 표현식을 사용하는 데 유용한 방법

JavaScript는 정규 표현식을 사용하는 데 유용한 여러 가지 방법을 제공합니다. 이러한 방법을 사용하면 정규 표현식을 사용하여 텍스트 문자열을 검색, 바꾸기, 분할하는 등의 일반적인 작업을 수행할 수 있습니다. 이러한 방법 중 일부를 살펴보겠습니다.

성냥()

방법 match() 텍스트 문자열에서 정규 표현식과 일치하는 모든 항목을 찾아 결과가 담긴 배열을 반환하는 데 사용됩니다. 예를 들어:

const texto = "¡Hola, mundo!";
const regex = /o/g;
const coincidencias = texto.match(regex);
console.log(coincidencias); // ["o", "o"]

이 예에서 우리는 다음 방법을 사용했습니다. match() 정규 표현식의 모든 일치 항목을 찾으려면 /o/g 텍스트 문자열 "Hello, world!" 방법 match() 발견된 모든 일치 항목을 담은 배열을 반환합니다.

() 바꾸기

방법 replace() 텍스트 문자열에서 정규 표현식과 일치하는 항목을 새 값으로 바꾸는 데 사용됩니다. 예를 들어:

const texto = "¡Hola, mundo!";
const regex = /mundo/;
const nuevoTexto = texto.replace(regex, "amigo");
console.log(nuevoTexto); // "¡Hola, amigo!"

이 예에서 우리는 다음 방법을 사용했습니다. replace() 정규 표현식 일치를 대체하려면 /mundo/ 텍스트 문자열 "Hello, world!" "친구"라는 단어에 대해서 방법 replace() 대체된 내용을 사용하여 새로운 텍스트 문자열을 반환합니다.

스플릿()

방법 split() 정규 표현식을 구분 기호로 사용하여 텍스트 문자열을 하위 문자열 배열로 분할하는 데 사용됩니다. 예를 들어:

const texto = "Hola,mundo,amigo";
const regex = /,/g;
const subcadenas = texto.split(regex);
console.log(subcadenas); // ["Hola", "mundo", "amigo"]

이 예에서 우리는 다음 방법을 사용했습니다. split() 정규 표현식을 사용하여 텍스트 문자열 "Hello,world,friend"를 하위 문자열 배열로 분할하려면 /,/g 구분 기호로 사용 방법 split() 결과 하위 문자열을 포함하는 배열을 반환합니다.

테스트()

방법 test() 정규 표현식과 일치하는 텍스트 문자열이 있는지 확인하는 데 사용됩니다. 이 메서드는 다음을 반환합니다. true 만약 매치가 있고 false 그렇지 않으면. 예를 들어:

const texto = "Hola, mundo!";
const regex = /mundo/;
const resultado = regex.test(texto);
console.log(resultado); // true

이 예에서 우리는 다음 방법을 사용했습니다. test() 정규 표현식을 확인하려면 /mundo/ 텍스트 문자열 "Hello, world!"와 일치하는 항목이 있습니까? 방법 test() 다시 가져오다 true 우연이 있으니까요.

이는 JavaScript에서 정규 표현식을 사용하는 가장 일반적인 방법 중 일부입니다. 각 방법은 고유한 목적이 있으며, 귀하의 특정 요구 사항에 맞게 사용할 수 있습니다. 이러한 함수를 실험하여 정규 표현식을 사용한 작업을 얼마나 더 쉽고 빠르게 수행할 수 있는지 확인해 보세요.

Preguntas frecuentes

자바스크립트에서 정규 표현식이란 무엇인가요? 자바스크립트에서 정규 표현식은 문자열에서 텍스트를 찾고 조작하는 데 사용되는 검색 패턴입니다.

JavaScript에서 정규 표현식을 만드는 방법은? JavaScript의 정규 표현식은 클래스를 사용하여 생성됩니다. RegExp 또는 문자 그대로를 사용하여 /patrón/.

정규 표현식에서 수정자와 플래그의 차이점은 무엇입니까? 수정자는 정규 표현식의 끝에 추가되어 정규 표현식의 동작을 수정합니다. 클래스를 사용하여 정규 표현식을 생성할 때 두 번째 슬래시 뒤에 플래그가 추가됩니다. RegExp.

방법의 차이점은 무엇입니까? match() 그리고 방법 test()? 방법 match() 이는 텍스트 문자열에서 정규 표현식과 일치하는 모든 항목을 찾고 결과가 담긴 배열을 반환하는 데 사용됩니다. 방법 test() 정규 표현식과 일치하는 텍스트 문자열이 있는지 확인하는 데 사용되며 부울 값을 반환합니다.

정규 표현식에서 그룹을 사용하여 특정 값을 캡처하려면 어떻게 해야 합니까? 그룹 ( ) 정규 표현식을 사용하면 특정 하위 표현식을 캡처할 수 있습니다. 그런 다음 참조를 사용하여 이러한 그룹을 참조할 수 있습니다. \1, \2등

JavaScript에서 정규 표현식을 사용하려면 어떤 방법을 사용할 수 있나요? JavaScript에서 정규 표현식을 사용하는 데 유용한 몇 가지 방법은 다음과 같습니다. match(), replace(), split() y test(). 각 방법은 고유한 목적이 있으며, 귀하의 특정 요구 사항에 맞게 사용할 수 있습니다.

결론

정규 표현식은 JavaScript에서 텍스트를 다루는 강력한 도구입니다. 정규 표현식의 기본 , 구문 및 고급 기술을 이해하면 텍스트 문자열을 효율적이고 정확하게 검색, 바꾸기 및 조작할 수 있습니다. 기본적인 일치부터 수정자, 그룹 및 기타 유용한 메서드 사용에 이르기까지 JavaScript 프로젝트에서 정규 표현식을 최대한 활용하는 방법을 배웠습니다.

정규 표현식에 대한 이해와 익숙해짐을 강화하려면 다양한 패턴과 사용 사례를 연습하고 실험하는 것을 잊지 마세요. 코드의 효율성과 품질을 향상시키고 싶다면 주저하지 말고 정규 표현식을 사용하세요!