JavaScript 정규식으로 따옴표 안의 단어 추출하기

이 글에서는 JavaScript를 사용하여 문자열에서 따옴표(" ")로 묶인 단어를 추출하는 방법을 알아봅니다. 핵심은 정규식(Regular Expression)을 활용하는 것으로, 간단한 패턴 하나만으로 원하는 텍스트를 손쉽게 가져올 수 있습니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>Extract the words in quotations</h1>
<div style="color: green;" class="result">Hello "World"</div>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the text between quotes</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let sampleEle = document.querySelector(".sample");
    let regex = /"(.*?)"/g;
    var match = regex.exec(resEle.innerHTML);
    BtnEle.addEventListener("click", () => {
        if (match) {
            sampleEle.innerHTML += match[0];
        }
    });
</script>
</body>
</html>

코드 설명

정규식 패턴: /"(.*?)"/g는 두 개의 큰따옴표 사이에 있는 모든 문자를 캡처합니다. 여기서 (.*?)는 가능한 한 적은 문자와 일치하는 비탐욕(non-greedy) 매칭을 의미하며, 마지막의 g 플래그는 문자열 전체에서 일치하는 모든 결과를 찾도록 합니다.
exec() 메서드: regex.exec()는 대상 문자열에서 패턴과 일치하는 첫 번째 결과를 반환합니다. 반환된 배열의 [0]에는 따옴표를 포함한 전체 일치 문자열이 담기고, [1]에는 괄호로 캡처된 내부 텍스트가 담깁니다.
버튼 이벤트: 'CLICK HERE' 버튼을 클릭하면 추출된 결과가 .sample 영역에 출력됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript 정규식으로 따옴표 안의 단어 추출하기

'CLICK HERE' 버튼을 클릭하면 따옴표 사이의 텍스트가 아래와 같이 추출되어 표시됩니다.

JavaScript 정규식으로 따옴표 안의 단어 추출하기

마무리

이처럼 JavaScript의 정규식과 exec() 메서드를 조합하면 따옴표로 감싸진 텍스트를 매우 간단하게 추출할 수 있습니다. 만약 여러 개의 따옴표 구문을 모두 가져오고 싶다면 matchAll() 메서드나 반복문과 함께 exec()를 사용하면 됩니다. 실무에서는 사용자 입력 파싱, 로그 분석, 텍스트 데이터 가공 등 다양한 상황에서 유용하게 활용할 수 있습니다.