JavaScript로 문자열에서 큰따옴표 사이의 텍스트 추출하기

JavaScript를 사용하면 정규표현식(RegEx)과 match(), split() 메서드만으로 문자열에서 큰따옴표로 감싸인 텍스트를 손쉽게 추출할 수 있습니다.

텍스트 블록에서 따옴표로 묶인 문장을 가져오고 싶은 경우가 종종 있습니다. 일반적으로 인용문은 큰따옴표(" ")로 감싸져 있는데요, 이럴 때 JavaScript의 match() 메서드와 약간의 정규표현식 마법을 활용하면 간단히 해결됩니다.

먼저 큰따옴표로 감싸인 문장 하나가 포함된 텍스트 블록(문자열)을 textWithQuote라는 변수에 할당해 보겠습니다:

const textWithQuote =
  'One of my favorite quotes is "First we make our habits, then our habits make us". This quote is sometimes attributed to John Dryden, or other authors.'

이제 변수에 match() 메서드를 연결하고, 다소 복잡해 보이는 정규표현식 인자 /(?:"[^"]*"|^[^"]*$)/)[0].replace(/"/g, "")를 전달합니다:

const extractQuote = textWithQuote
  .match(/(?:"[^"]*"|^[^"]*$)/)[0]
  .replace(/"/g, "")

결과를 출력해 보면 다음과 같습니다:

console.log(extractQuote)
// "First we make our habits, then our habits make us"

[0]과 replace()를 사용하는 이유

[0]을 붙이는 이유는, 이를 생략하면 반환되는 문자열이 중복되기 때문입니다. [0]을 사용하면 첫 번째 결과 하나만 반환하도록 지정하는 셈입니다.

또한 replace() 메서드(.replace(/"/g, ""))를 사용하는 이유는, 이 과정을 생략하면 반환된 결과에 불필요한 따옴표가 함께 포함되기 때문입니다. 이미 따옴표가 있는 문자열 안에서 따옴표로 묶인 텍스트를 가져오다 보니 겹치는 부분이 발생하는 것이죠.

split()을 활용한 대안 방법

split() 메서드를 사용해서도 큰따옴표로 감싸인 텍스트 값을 얻을 수 있습니다:

const textWithQuote =
  'One of my favorite quotes is "First we make our habits, then our habits make us". This quote is sometimes attributed to John Dryden, or other authors.'

console.log(textWithQuote.split('"')[1])
// "First we make our habits, then our habits make us"

이 방식에서는 두 번째 결과인 [1]을 반환하도록 지정해야 합니다. split()은 큰따옴표를 기준으로 문자열을 나누기 때문에, [0]을 사용하면 첫 번째 조각인 One of my favorite quotes is가 반환됩니다.

반대로 [2]를 지정하면 두 번째 큰따옴표 바로 뒤에 오는 텍스트를 얻게 됩니다.

어떤 방법을 선택해야 할까?

두 방법 모두 동일한 결과를 내지만, 상황에 따라 장단점이 있습니다. match()와 정규표현식을 조합한 방법은 패턴 매칭에 유연하여 복잡한 조건에 대응하기 좋고, split() 방법은 코드가 직관적이고 간결하다는 장점이 있습니다. 문자열 구조가 단순하고 예측 가능하다면 split()이 더 읽기 쉬운 선택일 수 있으며, 다양한 형태의 입력을 처리해야 한다면 정규표현식 기반 접근이 더 안정적입니다.