JavaScript 정규식 팁: 설명을 사용하여 "HelloWorldAgain"을 "Hello World Again"(Camelcase에서 단어 분리)으로 변경

따라서 카멜케이스 단어를 공백으로 구분된 단어로 바꾸려는 경우 이 문제에 직면했을 수도 있습니다. 여기 있습니다.

const words = "HelloWorldAgain".replace(/([a-z0-9])([A-Z])/g, "$1 $2");

console.log(words)

// output: Hello World Again

여기서 무슨 일이 일어나고 있는지 이해하는 방식으로 설명하겠습니다.

우리는 .replace(arg1, arg2)를 사용했습니다. 첫 번째 인수는 찾을 대상입니다. 두 번째 인수는 우리가 찾은 것을 대체합니다.

정규식/([a-z0-9])([A-Z])/g을 사용했습니다. 이것은 2개의 그룹을 찾을 위치를 의미하며, ()는 캡처 그룹을 의미합니다. 보시다시피 ([a-z0-9]) 및 ([A-Z]) 2개의 그룹이 있습니다. 따라서 이것은 aB 또는 6B 와 같이 작은/숫자와 대문자로 보일 것임을 의미합니다.

다음은 "$1 $2"입니다. 그래서 우리는 얼마 전에 정규식 캡처 그룹에 대해 설명했습니다. 따라서 $1는 그룹 1을 나타내고 $2는 그룹 2를 나타냅니다. 예를 들어 aB는 a B가 됩니다. 두 번째 인수인 "$1 $2" 사이에 공백이 있기 때문입니다. 또 다른 예:

`yourTheBest`.replace(/([a-z0-9])([A-Z])/g, "$1-$2");
// output: 'your-The-Best'

구분 기호가 "$1-$2"사이에 점선으로 표시되기 때문입니다. 따라서 더 많은 그룹을 추가하고 싶다면 $3를 추가하여 세 번째 그룹을 나타낼 수 있습니다. 예시:

`yourTheB1est`
.replace(/([a-z0-9])([A-Z])([0-9])/g, "$1-$2 $3");

// output: 'yourThe-B 1est'

따라서 위의 코드에서 ([0-9])라는 또 다른 그룹을 추가했으며 0에서 9까지의 문자를 찾습니다. 따라서 그룹에 따라 순서대로 이 문자를 찾으면 "$1-$2 $3" 형식을 기준으로 대체하므로 'yourThe-B 1est' 이 됩니다. yourThe 뒤에 숫자가 없기 때문에 T 를 무시했습니다.


이 짧은 기사에서 조금 배우기를 바랍니다. 자세한 내용을 보려면 내 블로그 사이트를 확인하십시오: https://blog.brojenuel.com

나에게 커피를 주고 싶다면
나는 당신을 멈추지 않을 것입니다: https://ko-fi.com/brojenuel

내 GCash에 GCASH가 있는 경우 Gcash 앱을 사용하여 스캔하세요.