정규식으로 camel-case 파싱하기

 

📌 camelCase를 단어 단위로 파싱 하기

축약 표현(ex. CSS )도 지원하면서 다음과 같이 camelCase 키워드를 단어 단위로 파싱 하려고 합니다.

 

searchSeoulPOIItems → search seoul poi items

searchSeoulPoiItems → search seoul poi items

CSSProperties → css properties

searchNIMBUS2000BroomStick → search nimbus2000 broom stick

 

정규식의 lookbehind 를 사용하면 쉽게 해결이 가능한데, safari는 16.4부터 지원해서 크로스브라우징 이슈가 있습니다.

그래서 다른 방식으로 문제를 해결해보려고 합니다.

 

📌 lookbehind를 사용하지 않고 해결해 보기

 

이제부터 2가지 과정으로 진행됩니다.

1. 전부 대문자로 이루어진 축약단어를 추출하고 이를 lowercase 변환 + 맨 앞에 공백을 하나 추가해 줍니다.
2. 정규식으로 대문자+소문자로 구성된 규칙을 찾아 처리해줍니다.

이때, 1, 2 모두에서 매칭된 문자를 모두 소문자로 바꿔줍니다.

 

1️⃣ 대문자로만 구성된 축약어 찾기

축약표현을 포함한 경우 pointABC, pointABC900 처럼 대문자 혹은 숫자로 끝날 수 있습니다.

다만 여기서는 경계구분만 해주면 되기 때문에 다음과 같은 정규식으로 단어를 구분합니다.

 

([A-Z](?=[A-Z0-9])|[A-Z]$)

 

구분은 해줬으니 이제 공백추가 + 소문자 변환 을 해줘야 합니다.

위 정규식으로 대문자로 구성된 약자의 맨 앞글자에만 앞에 공백 1개를 추가해줘야 합니다.

이를 위해 매칭된 문자의 offset을 이용합니다.

이전에 매칭된 문자의 offset과 2 이상 차이가 나면 새로운 단어로 구분됨을 알 수 있습니다.

 

function replaceShorthand(str: string) {
  const replacer = createReplacer()

  return str.replace(/([A-Z](?=[A-Z0-9])|[A-Z]$)/g, replacer)
}

function createReplacer() {
  let prevMatchedOffset = -2 // 첫번째 문자가 매칭된 경우에도 올바르게 처리하기 위해 시작 경계값을 -2 로 설정

  return (match: string, group: unknown, offset: number) => {
    const offsetDiff = offset - prevMatchedOffset
    const needWhiteSpace = offsetDiff > 1 && offset > 0

    prevMatchedOffset = offset

    const whitespace = needWhiteSpace ? ' ' : ''
    return whitespace + match.toLowerCase()
  }
}

 

prevMatchedOffset 초기값이 -2 인 것을 눈여겨봅시다.

그리고 매칭된 문자의 offset 이 0인 경우에는 앞에 공백을 넣어주면 안 됩니다.

매칭되는 패턴은 다음과 같습니다.

 

searchSeoulPOIItems
           ^^^

CSSProperties
^^^

APC900
^^^

 

여기까지 하면 다음과 같이 파싱 됩니다.

 

> input: searchSeoul95GuidePPLAndFood
> output: searchSeoul95Guide pplAndFood

 

⚠️ 주의할 사항

camelCase에서 축약어를 대문자로 표현할 때는 축약어뒤에 오는 새로운 단어는 대문자로 시작합니다.

때문에 다음과 같이 규칙을 벗어난 경우는 올바른 구분이 어렵습니다.

 

POPLandGoods

2️⃣ 대문자+소문자로 구성된 규칙 처리하기

정규식으로 대문자+소문자 n개 (ex. Camel) 로 구성된 단어를 구분합니다.

 

([A-Z](?=[a-z0-9]))

 

이제 해당 단어와 매칭되는 부분을 replace 처리합니다. 다행히도, 이전에 우리가 구현한 replacer로 동일한 처리가 가능합니다.
replacer가 모든 대문자를 소문자로 바꾸되 연속된 대문자라면 첫 번째 대문자 앞에만 공백을 추가해 주기 때문입니다.

그래서 createReplacer를 그대로 활용해 줍니다.

 

function replaceCapitalLetter(str: string) {
  const replacer = createReplacer()

  return str.replace(/([A-Z](?=[a-z0-9]))/g, replacer)
}

 

여기서 매칭되는 패턴은 다음과 같습니다.

 

searchA9Seoul poiItems
      ^ ^        ^

searchSeoulPoiItems
      ^    ^  ^

cssProperties
   ^

C9
^

 

📌 위에서 구현한 함수들을 합칩니다.

1번과 2번에서 구현한 함수들을 사용하는 parse 라는 함수를 구현합니다.

파싱 할 문자열을 인자로 받고 축약어 파싱 과 대문자 파싱 과정을 거쳐서 최종 문자열이 생성됩니다.

 

function parse(str: string) {
  const sanitized = replaceShorthand(str)
  const pretty = replaceCapitalLetter(sanitized)

  return pretty
}

 

parse 함수를 사용하면 다음과 같은 결과를 얻을 수 있습니다.

 

input: searchSeoulGuide
output: search seoul guide

input: searchSeoul95GuidePPLAndFood
output: search seoul95 guide ppl and food