정보실

웹학교

정보실

javascript 정규식 자습서 : JavaScript를 사용한 정규식 초보자 가이드

본문

1*ZVlIZ1ZYC6rASz-dYPzhZQ.jpeg 


아, 정규식! 내 존재의 허풍! 정규 표현식은 프로그래밍을 배울 때 모두가 건너 뛰는 빵의 끝 조각과 같습니다. 이 기사가 끝날 무렵에 이것과 관련이 있다면, 내가 한 것처럼 정규 표현에 대한 생각을 바꾸고 광범위한 응용 프로그램으로 당신의 동맹국이 될 것입니다.


https://medium.com/@mwarfa/regex-tutorial-beginners-guide-to-regular-expressions-using-javascript-1593babb4bf8 


h * ck는 정규식이란 무엇입니까? 


정규식(regular expressions)이라고도 하는 정규식(Regex)은 검색 패턴에서 하나 이상의 일치 항목을 검색하는 데 사용되는 일련의 문자입니다. 기본적으로 문장에서 패턴을 찾는 방법입니다. 날짜 또는 이메일 주소의 입력 형식이 특정한 방식으로 되길 원하십니까? 정규식은 당신의 동맹국입니다! 문자열을 구문 분석하고 바꾸고 싶습니까? 

정규식! 개발자는 정규 표현식을 처음에는 협박할 수 있지만 일단 이 짐승을 속박하면 특히 많은 양의 데이터를 구문 분석해야 할 때 수천 시간을 절약 할 수 있습니다. 

다른 프로그래밍 언어는 정규 표현식을 구현하는 데 약간 다를 수 있지만 기본 개념은 거의 동일하므로 예제를 살펴보기 전에 몇 가지 개념을 살펴 보겠습니다.


기본 안내서 


특수 문자 Special Characters.      개행을 제외한 모든 문자와 일치^      문자열의 시작과 일치$      문자열의 끝과 일치+      RE의 1 회 이상의 반복 일치*      RE의 0 번 이상의 반복과 일치{m}    이전 RE의 m 개 사본과 정확히 일치{m,n}  RE의 m에서 n까지 정확하게 일치\      특수 문자 탈출특수 탈출 문자 Special Escape Characters\A     문자열의 시작 부분에서만 일치 \b     단어의 시작 또는 끝에서 빈 문자열과 일치\d     [0-9]를 포함하는 모든 십진수와 일치\D     십진수가 아닌 모든 문자와 일치\s     탭과 줄 바꿈을 포함한 공백 문자 일치\S     공백이 아닌 모든 문자와 일치\w     [a-zA-­Z0-9_]을 (를) 포함한 유니 코드 단어 문자와 일치시킵니다.\W     \w의 반대와 일치


이 참조는 정규식의 기본 사항을 다루며 이 치트 시트에서 완전한 정규식 버전을 찾을 수 있습니다. 이제 몇 가지 예를 살펴 보겠습니다.


브라우저에서 개발자 도구를 엽니다. 크롬을 사용하는 경우 키보드 단축키 Ctrl + Shift + I를 사용하십시오. Firefox에서 Ctrl + Shift + K를 사용하는 경우 콘솔에서 다음 코드를 한 줄씩 입력하면 예제를 수행하고 간단한 설명을 제공합니다.


리터럴 문자열 일치 


let testStr = "Hello, my name is Muhsin.";
let testRegex = /Muhsin/;
testRegex.test(testStr);
// Returns true 


JavaScript에서 .test() 메서드는 정규식을 가져 와서 괄호 안에 있는 문자열에 적용하고 패턴이 해당 문자열의 항목과 일치하면 true 또는 false를 반환합니다. 이 예에서 정규 표현식은 문자열 "Muhsin"의 리터럴 일치를 검색했습니다. "Muhsin"의 다른 형태는 "mUhSiN"또는 "muhsin"과 일치하지 않습니다. 특정 사례입니다.


일치하는 동안 대소 문자 무시 


let myString = "freeCodeCamp";
let fccRegex = /freeCodeCamp/i;
let result = fccRegex.test(myString); 


일반적으로 정규 표현식은 문자열의 리터럴 일치를 찾지만 때로는 대문자 또는 작은 글자와 같은 다른 경우와 일치하여 플래그를 사용하려고 할 수 있습니다. 여기서는 대소 문자를 무시하고 문자열 "freeCodeCamp"의 다른 변형과 일치하는 플래그 i를 사용합니다.


일치 항목 추출 


지금까지는 일치 여부만 테스트하고 있습니다. 일치 항목을 추출하여 다른 계산에 사용하려면 어떻게 해야 합니까? .match() 메소드가 사용됩니다. 참고 :이 방법을 사용하려면 문자열과 함께 사용하고 괄호 안에 정규식을 전달해야 합니다.


let extractStr = "Extract the word 'fun' from this string.";
let codingRegex = /fun/;
let result = extractStr.match(codingRegex);
// Returns ["fun"] 


"result"변수는 추출 된 단어의 목록을 반환합니다. 이 경우에는 "fun"입니다.


첫 일치보다 더 찾기 


지금까지 하나의 패턴만 추출해야 했습니다. 하나 이상의 패턴을 검색하기 위해 플래그 g를 사용합니다.


let twinkleStar = "twinkle, twinkle, little star";
let starRegex = /twinkle/g;
let result = twinkleStar.match(starRegex);
// Returns ["twinkle","twinkle"] 


g 플래그를 사용하면 문자열 twinklestar에서“twinkle”단어를 모두 찾아서 추출 할 수 있습니다.


와일드 카드 기간과 일치하는 항목 


때때로, 당신은 당신이 찾고 있는 정확한 단어를 모르거나 기억하지만 그 단어로 시작하는 문자만 알고 있습니다. 이 경우 와일드 카드 마침표 또는 점을 사용합니다. . 와일드 문자는 모든 문자와 일치합니다.


let exampleStr = "Let's have fun with regular expressions!";
let unRegex = /.un/;
let result = unRegex.test(exampleStr);
//returns true 


이 예에서 결과 변수는 "fun", "run", "bun"등과 같이 un으로 끝나는 단어의 변형에 대해 true를 반환합니다.


여러 가능성으로 단일 문자 일치 


지금까지 우리는 리터럴 패턴을 /literal/로 표시하고 와일드 카드 /./를 일치 시키는 방법을 배웠습니다. 이것들은 두 가지 극단이지만 균형을 원한다면 어떨까요?


문자 클래스에 약간의 유연성이 있는 리터럴 패턴을 검색 할 수 있습니다. 문자 클래스를 사용하면 일치 시킬 문자 그룹을 대괄호 [] 괄호 안에 넣어서 정의 할 수 있습니다.


let bigStr = "big";
let bagStr = "bag";
let bugStr = "bug";
let bogStr = "bog";
let bgRegex = /b[aiuo]g/;
bigStr.match(bgRegex); // Returns ["big"]
bagStr.match(bgRegex); // Returns ["bag"]
bugStr.match(bgRegex); // Returns ["bug"]
bogStr.match(bgRegex); // Returns ["bog"] 


[aiuo]는 "big", "bag", "bug"및 "bog"에 대해 true를 반환하는 문자 클래스이며, 다른 항목은 false를 반환합니다. 문자 "e"가 문자 클래스에 없기 때문에 "beg"는 false를 반환합니다.


알파벳의 숫자와 문자 일치 


정규식과 일치하는 문자와 숫자의 범위를 찾을 수도 있습니다. 예를 들어, /[0–4]/는 0과 4 사이의 숫자와 일치합니다.


let bigman = "muhsin8675309";
let myRegex = /[a-z0-9]/;
// matches all letters and numbers in bigman
bigman.match(myRegex); 


하이픈 (-)은 범위를 나타냅니다. 문자열이 숫자와 문자열을 접촉하기 때문에 이 예제는 일치합니다.


시작 문자열 패턴 일치 


Regex는 문장의 시작 또는 끝에 있는 경우 문자열에서 문자 / 단어의 위치를 ​​검색 할 수도 있습니다.


let firstString = "Muhsin is first and can be found.";
let firstRegex = /^Muhsin/;
firstRegex.test(firstString);
// Returns true
let notFirst = "You can't find Muhsin now.";
firstRegex.test(notFirst);
// Returns false 


참고 : 캐럿이 아닌 패턴 검색과 혼동 될 수 있습니다. 문자 집합 안에 ^를 사용하면 NOT을 의미합니다! 예를 들어 /[^ a-z]는 알파벳이 아닌 문자를 의미합니다.


끝 문자열 패턴 일치 


문자열 끝에 나타나는 단어를 찾을 수도 있습니다. 이 경우 정규식 뒤에 $ 기호를 사용합니다.


let theEnding = "This is a never ending story";
let storyRegex = /story$/;
storyRegex.test(theEnding);
// Returns true
let noEnding = "Sometimes a story will have to end";
storyRegex.test(noEnding);
// Returns false 


첫 번째 문자열에서“story”라는 단어가 문자열의 끝에 나타나고 두 번째 문자열이 가운데에 나타납니다. 따라서 테스트는 각각 true와 false를 반환합니다.


중급 가이드 


여태까지는 그런대로 잘됐다! 다음 몇 가지 예에서 우리는 톱니 바퀴를 움직이고 위의 참조 표에 제공된 개념 조합을 재사용할 것입니다. 다음 단계로 넘어 가기 전에 다시 한 번 더 살펴보세요.


일치하는 상위 및 하위 수 지정 


*는 0 개 이상의 일치를 반환하고 +는 하나 이상의 일치를 반환합니다. 특정 문자 범위와 일치 시키려면 어떻게 해야 합니까? 그때는 중괄호가 연주됩니다. 우리는 그것들을 문자열 내에서 더 적은 수와 더 많은 수의 패턴을 지정하는 수량 지정 자라고 부릅니다.


let loudScream= "aaaah";
let softScream = "aah";
let multipleA = /a{3,5}h/;
multipleA.test(loudScream); // Returns true
multipleA.test(softScream); // Returns false 


loudScream 변수에는 3과 5 사이에 있기 때문에 true를 반환하는 4 개의 a가 있고, softScream 변수는 3과 5 범위에 속하지 않는 2 개의 a를 가지고 있기 때문에 false를 반환합니다.


정확한 일치 수 지정 


범위의 하한과 상한을 지정할 수 있지만 정확한 수의 일치를 원한다면 어떻게 해야 합니까? 중괄호 사이에 하나의 숫자 만 넣습니다.


let A4 = "haaaah";
let A3 = "haaah";
let multipleHA = /ha{3}h/;
multipleHA.test(A4); // Returns false
multipleHA.test(A3); // Returns true 


이 예에서 정규 표현식은 (a) 이전에 문자가 3 번 포함 된 문자열에 대해 true를 반환합니다. 그렇기 때문에 A4 변수는 false를 반환하고 A3 변수는 true를 반환합니다.


모두 확인 또는 없음 


때로는 방언으로 인해 단어의 철자가 약간 다를 수 있습니다. 예를 들어 영국 영어에서는 "컬러"를 사용하고 미국 영어는 "컬러"를 사용합니다. 이 경우에는? 이전 요소 중 하나 또는 하나를 검사합니다.


let american = "color";
let british = "colour";
let rainbowRegex= /colou?r/;
rainbowRegex.test(american); // Returns true
rainbowRegex.test(british); // Returns true 


기본적으로 "u"문자 앞에? 선택 사항입니다. 따라서 "컬러"및 "컬러"모두에 대해 true를 반환합니다.


캡처 그룹을 사용하여 검색 및 교체 


검색하는 일부 패턴은 문자열에서 두 번 이상 발생합니다. 괄호로 표시된 캡처 그룹을 사용하여 반복되는 하위 문자열을 검색 할 수 있습니다. 이렇게 하면 반복되는 모든 하위 문자열을 텍스트 파일로 캡처 하여 원하는 대로 바꿀 수 있습니다! 그러나 그 전에 .replace() 메소드를 먼저 사용하십시오. 여기에는 두 개의 입력이 있습니다. 하나는 검색하려는 텍스트와 두 번째로 바꾸려는 단어입니다.


let wrongText = "The sky is silver.";
let silverRegex = /silver/;
wrongText.replace(silverRegex, "blue");
// Returns "The sky is blue." 


달러 부호 $를 사용하여 교체 문자열의 캡처 그룹에 액세스 할 수도 있습니다.


"Code Camp".replace(/(\w+)\s(\w+)/, '$2 $1');
// Returns "Camp Code" 


첫 번째 캡처 그룹은 "모든 유니 코드 단어 문자 캡처"와 공백, "모든 유니 코드 단어 문자 캡처"를 번역합니다. 이러한 캡처 된 하위 문자열은 저장되며 달러 기호를 사용하여 액세스 할 수 있습니다. 따라서 위의 문자열에서 "Code"라는 단어는 $ 1로, "Camp"는 $ 2로 캡처합니다. 위의 교체 문자열 "$ 2, $ 1"은 이들을 전환하여 "Camp Code"를 반환합니다.


그래도 조금 혼란스러워도 걱정하지 마세요.이 동영상에는 그룹 캡처 주제에 대한 자세한 설명이 있습니다.


게으른 일치하는 문자 찾기 


정규 표현식에서 욕심 많은 일치는 정규식 패턴에 맞는 문자열의 가장 긴 부분을 찾아서 일치로 반환합니다. 대안은 지연 일치라고 하며, 정규식 패턴을 만족하는 문자열에서 가능한 가장 작은 부분을 찾습니다. 


기본적으로 정규 표현식은 욕심이지만 물음표를 사용할 수 있습니까? 게으른 일치로 변경합니다.


let text = "<h1>Winter is coming</h1>";
let myRegex = /<h1>?/;
let result = text.match(myRegex); 


이 예에서는 "<h1> Winter is coming </ h1>"텍스트를 반환하는 대신 가능한 가장 짧은 패턴 인 "<h1>"을 반환합니다. 물음표를 제거한 후 다시 넣어 차이를 확인하여 테스트 할 수 있습니다.


긍정적이고 부정적인 전망 


Lookaheads는 JavaScript에서 문자열을 미리 보면서 패턴을 더 확인하도록 하는 패턴입니다. 동일한 문자열에서 여러 패턴을 검색하려는 경우에 유용합니다. 


룩어 헤드 포지티브 및 네거티브 룩어 헤드는 두 종류가 있습니다. 긍정적 인 예측은 패턴이 있는지 확인하지만 일치하지는 않지만 부정적인 예측은 패턴이 없는지 확인합니다. Lookaheads는 종종 암호 유효성 검사에 사용됩니다. 이 마지막 예에서는 5 자보다 길고 두 개의 연속 숫자가 있는 암호와 일치하는 정규식을 만듭니다.


let sampleWord = "astronaut";
let pwRegex = /(?=\w{5,})(?=\D*\d{2})/;
let result = pwRegex.test(sampleWord); 


위의 예제는 두 개의 lookahead를 사용하여 문자열의 패턴을 확인합니다. 첫 번째는 하한이 5이고 상한이 임의의 숫자 인 단어를 확인하는 반면 두 번째 lookahead는 정확히 두 자리를 확인합니다.


결론 


이 게시물이 도움이 되었기를 바랍니다. 추가 리소스가 필요한 경우 FreeCodeCamp를 적극 권장합니다. 그들은 Regex에 대한 자세한 섹션이 있는 온라인 코스를 가지고 있습니다. Daniel Shiffman과 같은 YouTube 아이콘에는 정규식에 대한 재미있는 교육용 동영상이 있습니다. 마지막으로,이 온라인 정규식 테스터 도구를 사용하여 새로운 기술을 테스트 할 수도 있습니다!



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 27회 ]  작성일19-08-31 17:37

웹학교