Regex는 정규 표현식을 나타냅니다. JavaScript에서 Regex는 문자열을 우리가 만든 패턴과 일치시킬 수 있도록 합니다.regex의 일부 용례는 사용자가 앞에서 유효한 전자메일을 입력할 수 있도록 하거나, 숫자가 아닌 자모만 입력할 수 있도록 합니다.정규 표현식은 우리 자바스크립트 코드에서 매우 유용하지만, 우리는 어떻게 그것들을 만듭니까?다음은 간단한 정규 표현식의 예이다.

let myProfession = "Web Developer";
let professionRegex = /Web Developer/g;

if (professionRegex.test(myProfession)) console.log(true);
// console logs true

위의 예는 myProfession 변수가professionRegex 정규 표현식과 일치하는지 테스트하는 정규 표현식입니다.이 테스트는 .test() 방법을 통해 완성되었다.이것은 간단한 예이지만, 몇 가지 상상을 통해 우리는 정규 표현식이 얼마나 편리한지 알 수 있다.그럼에도 불구하고 정규 표현식에 무엇이 포함되어 있는지, 그리고 정규 표현식을 만드는 몇 가지 다른 방법을 살펴보자!

정규 표현식 만들기

기초 해부학과 모델

네가 간단한 정규 표현식을 쓸 때, 그것의 기본 부분은 통상적으로 직접적이다.앞의 예를 분석해서 정규 표현식에 무엇이 포함되어 있는지 봅시다.

let professionRegex = /Web Developer/g;

한 덩어리
묘사
/
이 슬래시는 정규 표현식의 시작이지만, 끝의 슬래시를 추가해야 자바스크립트가 정규 표현식임을 알 수 있습니다.
네트워크 개발자
이것은 정규 표현식의 내용이다.여기에 텍스트나 숫자를 추가할 수 있지만, 더 흔히 볼 수 있는 것은 추가 모드입니다.
/
이것은 정규 표현식의 정사각형 끝이다.
g
이것은 정규 표현식의 끝에 있는 표지이다.그것은 정규 표현식이 검색을 완성하는 방식을 수정할 수 있다.

정규 표현식의 더 많은 부분

현재 우리는 이미 몇 가지 기본적인 정규 표현식 해부를 보았는데, 다음은 네가 만날 수 있는 흔한 부분들이다.
심벌
묘사
예.
^
이 기호는 문자열에서 검색을 시작하는 정규 표현식을 알려 줍니다.
/^ 네트워크 개발자/g
\$
이 기호는 정규 표현식이 문자열의 끝에서부터 검색을 시작한다는 것을 알려 줍니다.
/^ 네트워크 개발자/g
.
이것은 하나의 어댑터와 같아서, 모든 문자와 일치할 수 있다는 것을 의미한다.
//g
\w
이것은 어떤 단어도 나타낸다.대문자 W는 단어가 아닌 문자를 나타냅니다.
/\w/g
\d
이것은 어떤 숫자도 나타낸다.대문자 D는 숫자가 아닌 문자를 나타냅니다.
/\d/g
[ ]
네모난 괄호는 하나의 범위를 표시한다.
/[aA zZ]/g
( )
괄호는 캡처 그룹을 나타냅니다.괄호 안의 모든 내용을 함께 찾아야 한다는 뜻이다.
/([aA zZ]\
{ }
이것은 어떤 일이 여러 번 반복되는지 검사할 것이다.
/s{2}/g
참고: 세로/파이프(|)는 or를 나타냅니다.예:/\w |\d/g. 태그 테이블이 | 를 사용하여 새 줄을 표시하므로 올바른 이스케이프를 수행할 수 없습니다.

Regex-Literal 메서드

regex literal 방법은 우리가 예시에서 regex를 만드는 방법을 소개하는 것입니다.이것은 두 개의 중간에 도안이 있는 앞사선을 사용하여 만든 것이다.여러 가지 패턴이 있지만 여기에는 우리의 발을 흠뻑 젖게 할 수 있는 기본적인 예가 있다.
문자열만 검사하는 모드를 사용하면 앞의 예시가 문자열만 포함하는지 테스트할 수 있습니다.

let myProfession = "Web Developer";
let professionRegex = /[aA-zZ]/g;

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs true

숫자만 검사하는 모드를 사용하면 앞의 예시가 숫자만 포함하는지 테스트할 수 있습니다.

let myProfession = "Web Developer";
let professionRegex = /[0-9]/g;

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs false

정규 표현식 구조 함수 방법

구조 함수 방법을 사용하여 정규 표현식을 만들려면 new 키워드를 사용하여 초기화해야 합니다.이 방법은 여전히 정규 표현식이지만, 동적 정규 표현식을 만들 수 있다는 장점이 있다.

let myProfession = "Web Developer";
let userInput = 29;
let professionRegex = new RegExp(`${userInput}`);

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs false

구조 함수 방법 덕분에 우리는 템플릿 텍스트와 정규 표현식을 결합시켜 테스트를 더욱 동적으로 할 수 있다.이러한 조합의 예시적인 예는 일부 사용자가 입력하거나 다른 코드에 따라 테스트에 사용할 변수가 다를 수 있고 여러 장면에 대한 하드코딩이 아닌 동적 특성을 원한다는 것이다.

두 가지 유용한 방법

JavaScript에서 정규 표현식을 만들 때마다 기본 메서드를 사용할 수도 있습니다.이러한 메서드는 JavaScript 문자열의 원형에서 나온 것으로, 정규 표현식에 따라 변수와 입력을 테스트할 수 있습니다.더 많지만, 나는 두 가지 방법이 특히 유용하다고 생각한다.
.test() 방법
이 방법은 우리가 테스트한 변수가 정규 표현식과 일치하는지 검사할 수 있도록 합니다.우리는 이미 코드에서 이런 방법을 보았지만, 우리의 기억을 갱신하기 위해 그것을 다시 봅시다.

let myProfession = "Web Developer";
let professionRegex = /Web Developer/g;

if (professionRegex.test(myProfession)) console.log(true);
// console logs true

.test() 테스트를 바탕으로true나false를 되돌려줌으로써 변수가 정규 표현식과 일치하는지 알려 줍니다.
.match() 방법.match() 정말 멋져요!사용할 때, 문자열에서 정규 표현식과 일치하는 모든 내용의 그룹을 되돌려줍니다.이전 예시를 살짝 수정해서 .match()의 실제 효과를 봅시다.

let myProfession = "Web Developer";
let professionRegex = /Web/g;

console.log(myProfession.match(professionRegex));
// console logs ["Web"]

.match() 를 사용하면 내부에 문자열 '웹' 이 있는 그룹을 얻을 수 있습니다. 이것은 문자열의 정규 표현식과 일치하는 부분이기 때문입니다.사용자가 어떤 종류의 입력을 제공하기를 원하고, 이 입력에서 한 부분을 추출해야 할 때, 이것은 매우 유용할 수 있습니다.이 밖에 주의하지 않았을 수도 있지만 .match() 사용할 때 또 다른 차이가 있습니다.이 방법을 호출할 때, 실제로는 문자열에 있는 것이지 정규 표현식에 있는 것이 아닙니다.나는 상당히 많은 시간을 들여 이것을 디버깅했기 때문에, 나는 이것이 너를 도와 시간을 절약할 수 있기를 바란다😄.

레식스 멋있어요.😎

나는 만약 네가 레지스터에 들어가지 않았다면, 지금 네가 그것들이 프로그래밍할 때 얼마나 유용한지 볼 수 있기를 바란다.우리는 현재 정규 표현식을 어떻게 사용하는지 알고 있으며 .test()와 .match() 방법을 사용할 수 있기 때문에 다음 항목에서 그들의 용도를 찾을 수 있기를 바랍니다!
즐겁게 공부하다😄👋🏾