JavaScript에서 정규 표현식을 사용하는 방법

"Some people, when confronted with a coding problem, think "I know, I'll use regular expressions." Now they have two problems."

Jamie Zawinski (world class hacker)

 
정규 표현식
정규 표현식(RegEx)은 a string of text that allows you to create patterns that help match, locate, and manage text입니다.이 어둠의 예술에 정통한 사람들에게 정규 표현식은 믿을 수 없을 정도로 강할 수도 있고, 우리 다른 사람들에게는 곤혹과 곤혹의 근원일 수도 있다. 적어도 나는 그렇게 생각한다.최근에 면접을 위해 알고리즘 문제를 연습할 때 그것들을 자세히 살펴보니 내가 생각했던 것처럼 그렇게 까다롭지 않을 뿐만 아니라 매우 유용할 수도 있다는 것을 알게 되었다.주제가 광범위해서 한 문장에 포함될 수는 없지만, 나는 정규 표현식의 강력한 기능을 진정으로 이해할 수 있도록 관건적인 것을 공유하고 싶다.
 
문자열이 일치하는지 테스트
문자열에 특정한 단어가 있는지 알아야 한다면 어떻게 해야 합니까?너는 다음과 같은 몇 가지 일을 할 수 있다.

const string = 'The cat sat on the mat'
const regex = /sat/

regex.test(string)

// result: true

이것은 기본적으로 '테스트' 문자열로 문자열에 단어'sat '가 존재하는지 확인합니다.
두 번째 행의//는 JavaScript로 식별되며 중간 문자는 정규 표현식의 일부입니다.그런 다음 RegEx 변수를 테스트 () 방법과 결합하여 문자열을 검사할 수 있습니다.
결과는 되돌아오는 브리 값(true 또는false)일 뿐이기 때문에if/else 문장이나 삼원 연산자와 쉽게 조합하여 문자열의 존재 여부에 따라 진일보한 작업을 계속할 수 있다.
if/else 문과 함께 사용하려면 다음과 같이 하십시오.

const string = 'The cat sat on the mat'
const regex = /sat/

if (regex.test(string)) {

  'The word sat can be found in the string'

} else {

  'The word sat is not in the string'
}

// result: 'The word sat can be found in the string'

3원 연산자와 함께 사용하려면 다음과 같이 하십시오.

const string = 'The cat sat on the mat'
const regex = /sat/

const result = regex.test(string) ? 'The word sat can be found in the string' : 'The word sat is not in the string'

// result: 'The word sat can be found in the string'

이를 더욱 강화하기 위해 정규 표현식은 다음과 같이 표현식의 끝에'i'를 포함할 수 있다.

/sat/i

이것은 테스트로 하여금 대소문자를 구분하지 못하게 하기 때문에, 찾으려는 단어가 대문자가 있든 없든, 정확하게 일치하는지 확인합니다.
 
true나false가 아닌 실제 일치하는 문자를 되돌려줍니다
정합 자체를 포획하여 더 많은 사용을 제공해야 하는 것이지 정합이 존재하는지 확인하는 것이 아니라면 어떻게 해야 합니까?
이것은 match () 방법을 통해 실현할 수 있다.여기에 있는 구문 순서는 약간 다릅니다(괄호 안에 있는 RegEx).

const string = '989hjk976'

const regex = /[a-z]/gi

console.log(string.match(regex))

// result: [h, j, k]

[] 문자 범위를 지정했습니다. (이 예에서 a-z의 소문자입니다.)이 범위 내의 모든 것이 일치한다.[0-9]로 숫자를 검색하거나 [A-Z]로 대문자를 검색할 수 있다.또한 "[a-zA-Z0-9 3;"과 같은 단어 문자와 일치하는 "\w"(따옴표 없음)를 사용하여 속기를 할 수도 있습니다(밑줄 포함 참고).
'g' 는 전체 국면을 대표합니다. '모든 일치하는 항목을 표시합니다. 첫 번째 일치하는 항목만 표시하는 것이 아닙니다.' (검색할 때 정규 표현식은 왼쪽에서 오른쪽으로 읽습니다. 따로 지정하지 않으면 첫 번째 일치하는 항목에서 정지됩니다.)
더 구체적인 사항이 필요한 경우 다른 플래그 및 스위치를 사용할 수 있습니다.
 
“+”

const string = 'abc123DEF'

const regex = /[a-zA-Z]+/g

console.log(string.match(regex))


// result: ['abc', DEF]

//Note the + which means match 1 or more in a row

 
“.”

const string = 'abc123DEF'

const regex = /[a-z]./g

console.log(string.match(regex))


// result: ['ab', 'c1']

// The '.' means, 'include 1 more (of any character) after the matched string

 
“^”
일부 내용과 일치하지 않도록 '^' 을 사용할 수도 있지만, 사용할 때는 조심해야 합니다.

const onlyReturnIfConsonant  ​= (str) => { 

  const regex = /^[^aeiou]/  

  const result = str.match(regex)

  console.log(result)
}

// onlyReturnIfConsonant("bananas"); // result: ['b']

// onlyReturnIfConsonant("email"); // result: null

[] 외부의 "^"는 문자열의 시작만 검사함을 나타냅니다.
[]의 "^"는 지정된 컬렉션에 없는 문자와 일치하는 것을 나타냅니다.그래서 여기에는 자음으로 시작하는 단어만 결과를 되돌려준다.
순서가 중요할 수 있기 때문에 정규 표현식을 구성할 때 정확성이 필요하다.
또 많은 다른 표지와 스위치가 있는데, 그것들은 통상적으로 서로 결합하여 사용할 수 있지만, 그것들은 가능한 예를 제시했다.RegEx와 match ()에 대한 더 많은 세부 사항은 좋은 자원 here 을 찾을 수 있습니다.
 
regEx 및 split()을 사용하여 형식 설정
매칭을 포획하는 것이 아니라 매칭이 동시에 실행되기를 원한다면 어떻게 해야 합니까?가능한 경우 split () 방법을 사용합니다.이 방법은 문자열을 질서정연한 하위 문자열 목록으로 나누어 수조 형식으로 되돌려줍니다.이것은 매우 유용할 수 있지만, 희망 문자열을 어떻게 분리하는지 어떻게 설명합니까?이것이 바로 정규 표현식이 진정으로 유용한 곳이다.다음 예제에서는 함수 내부의 잠재적인 예를 보여 줍니다.

const separateAString = (str) => {

  return str.split(/\s+|\_+|(?=[A-Z])/).join(' ')

}

separateAString('TheCat_Sat onTheMat');

// result: ['The', 'Cat', 'Sat', 'On', 'The', 'Mat'] (before join())

// result: 'The Cat Sat On The Mat' (after join(" "), with spaces now included)

 
보시다시피 정규 표현식은 이것을 가능하게 하지만, 그것은 도대체 무엇을 의미하는가?

/\s+|\_+|(?=[A-Z])/

 

 
\s 공백 문자(+는 1개 이상)를 찾습니다.
u 밑줄을 찾습니다. 이것은 특정 프로그래밍 의미가 아닌 문자를 글자(있는 그대로) 정의하는 이스케이프 문자의 예입니다. 즉, "s"를 사용하면 실제 "s", "\s"를 사용하면 공백 문자로 간주됩니다.JavaScript에서는 밑줄을 이스케이프할 필요가 없으나 예를 들기 위해 사용합니다.여기에는 한 번 또는 여러 번 나타나는 밑줄을 잡기 위한'+'도 포함되어 있다.
()는 여러 문자를 하나의 단위로 보는 캡처 그룹을 나타냅니다.
그것 = 그것"()"의 "[A-Z]"는 긍정적인 전망의 예로, 이 예에서는 "모든 대문자 앞에서 문자열을 분할한다"는 뜻이다.
| 정규 표현식에서'or'라는 뜻으로 표현식의 세 부분을 분리하는 것을 보여 준다. 따라서'빈칸이나 밑줄이 있거나 대문자 앞에서는 분리한다'.표현식의 다른 부분을 한데 연결하는 이런 능력은 정규 표현식이 이렇게 강한 원인 중 하나를 뚜렷하게 보여준다.
그리고join () 방법은 문자열로 그룹을 변환해서 이 과정을 완성합니다.'(join () 의 지정한 매개 변수로) 문자열의 모든 위치에 빈칸을 추가합니다. 이 빈칸은 앞의 split () 방법으로 지정됩니다.
 
정규 표현식으로 수정 및 바꾸기 ()
마지막 예는 문자열에서 어떤 내용을 찾고 한 단계에서 다른 내용으로 바꾸려면 어떻게 해야 합니까?이것은 리플렉스 () 방법을 통해 실현할 수 있다.
다음은 함수에 사용되는 replace()의 기본 예입니다.

const replaceExample = (str) => {

  return str.replace('Test', 'Game')

}

replaceExample('This is a Test');

// result: 'This is a Game'

이 방법은 두 개의 매개 변수가 있는데 첫 번째는 바꿀 입력 문자열 부분이고 두 번째는 바꿀 문자열의 내용이다.
첫 번째 인자는 문자열이나 정규 표현식일 수 있습니다.문자열을 사용하면 첫 번째 문자열만 바꾸면 RegEx가 값을 증명할 수 있습니다. ("g"로고를 기억하십시오.)
다음 예제에서는 replace()가 있는 정규 표현식 예를 보여 줍니다.

const separateStrings = (str) => {

  return str.replace(/([a-z])([A-Z])/g, '$1 $2')

}

separateStrings('AnotherStringToSeparate');

// result: 'Another String To Separate'

이것은 신기술을 전시했다.
이 예시에는 두 개의 포획조가 포함되어 있는데, 이전 예시 중의 '()' 를 기억하십니까?첫 번째는 일련의 소문자 [a-z]를 포함한다.두 번째는 일련의 대문자 [a-Z]를 포함한다.
두 번째 인자 '$1$2' 는 포획 그룹에 대한 직접 참조 $입니다.1은 첫 번째 포획조([a-z]), 2는 두 번째 포획조([a-z])를 나타낸다.이것들을 인용부호에 넣고 그것들 사이에 빈칸을 남겨라. 이렇게 하면 '$1$2' 는 '대문자 옆에 소문자를 넣는 곳, 그들 사이에 빈칸을 두는 것' 이다."$1-$2"문자열은 다음과 같이 단어 사이에 "-"를 포함합니다.이것은 코드와 정규 표현식의 구조에 따라 임의의 수량을 사용할 수 있는 매우 동적 특성이다.내가 이 일을 발견했을 때, 나는 매우 멋있다고 느꼈다.
빈칸이나 문자를 추가하는 것은 당신이 유일하게 할 수 있는 일이 아니다. 다음 예는 두 포획 그룹을 어떻게 정의하고 카드를 씻듯이 전환하는지 보여 준다.

const shuffleAWord = (str) => { 

return str.replace(/(^[^aeiou]+)(\w*)/, '$2$1'); 

}

shuffleAWord("grain"); 

// result: 'aingr'

// in this case '$1' is 'gr', '2' is 'ain'

첫 번째 포획조 (^ [^aeiou] +) 는 단어의 첫머리에 있는 모든 자음을 수집하고 모음에 도달할 때 멈춘다.이 예에서, 그것은 'gr' 으로 되돌아왔다.
두 번째 캡처 그룹은 첫 번째 그룹에서 선택되지 않은 모든 영숫자 문자를 수집합니다(\w*)."*"는 "앞에 참조된 0자 이상의 문자와 일치"를 나타냅니다.이 예에서, 그것은 'ain' 으로 되돌아왔다.
replace 방법의 두 번째 인자는 포획 그룹 '$1' 과 '$2' 에 대한 인용을 다시 보여 주지만, 이번에는 '$2 $1' 으로 전환되어 연결되었습니다.이것은 다음과 같은 결과를 초래할 것이다. "aingr".
 
결론
위의 예는 정성스럽게 설계되었지만, 자바스크립트가 제공하는 방법과 함께 사용할 때 정규 표현식이 어떻게 설정되고 유연한지 보여주는 것이 목적이다.또 많은 다른 예가 있지만, 이것은 단지 내가 최근에 발견한 유용한 예일 뿐이다.
이 문장의 마지막 부분에서 몇 가지 언급할 만한 것이 있다.

비록 강력한 기능과 실용성을 가지고 있지만 advised not to overuse RegEx 코드를 읽기 어려울 수 있기 때문이다

정규 표현식 문자열이 헷갈리기 쉬우면 주석을 추가해서 무엇을 하는지 확인하십시오

읽기 쉽도록 설계

정규 표현식을 구성하는 것은 까다로울 수 있지만 매우 유용한 도구가 있다. 예를 들어 this one와this one 등은 과정을 더욱 쉽게 할 수 있다

나는 이 글이 도움이 되기를 바란다. 만약 그들이 RegEx 세계에서 특히 유용하게 발견한 어떤 힌트나 기교를 공유하고 싶다면, 평론에서 공유해 주십시오.
읽어주셔서 감사합니다.