프로젝트 요구사항 및 접근 방식

웹 프로젝트에서 체크박스(Checkbox) 목록의 텍스트를 기반으로 사용자가 입력한 키워드의 중복을 방지해야 하는 상황이 발생할 수 있습니다. 이를 해결하기 위해 클라이언트 단에서 자바스크립트를 활용한 다음과 같은 로직을 구성할 수 있습니다.

1. 페이지 내 특정 체크박스 그룹의 라벨 텍스트를 추출하여 배열에 저장합니다.
2. 사용자가 입력한 텍스트에서 특수문자를 제거하고 유효한 문자만 필터링합니다.
3. 필터링된 입력값과 기추출된 키워드 배열을 비교하여 중복 여부를 판별합니다.

이 과정에서 체크박스 텍스트에 포함된 특수문자로 인한 오판을 방지하기 위해 정규표현식을 통한 문자열 전처리가 필수적입니다.

정규표현식을 이용한 문자 필터링

문자열을 순회하며 한글, 한자(CJK 문자) 그리고 특수문자를 식별하는 기본적인 정규표현식 매칭 예제입니다. 최신 자바스크립트(ES6+)의 유니코드 속성 이스케이프(\p{Script=...})를 사용하면 다국어 문자를 더욱 명확하고 안정적으로 매칭할 수 있습니다.

const targetString = "테스트Test世界!@#";

// 유니코드 속성을 활용한 한글 및 한자 매칭
const cjkRegex = /\p{Script=Hangul}|\p{Script=Han}/u;
// 주요 특수문자 매칭
const specialCharRegex = /[.*+?^${}()|[\]\\\/!@#]/;

for (const char of targetString) {
    if (cjkRegex.test(char)) {
        console.log(`CJK 문자 감지: ${char}`);
    }
    if (specialCharRegex.test(char)) {
        console.log(`특수문자 감지: ${char}`);
    }
}

키워드 추출 및 중복 검증 로직 구현

아래 코드는 DOM에서 체크박스 라벨을 가져와 특수문자를 기준으로 분할하고, 사용자의 입력값을 정제하여 중복을 검사하는 전체 흐름을 모듈화한 예제입니다. 기존 반복문과 재귀 호출을 네이티브 자바스크립트의 배열 메서드와 Set 객체를 활용해 최적화하여 가독성과 성능을 개선했습니다.

/**
 * 지정된 이름 속성을 가진 체크박스 그룹에서 키워드를 추출합니다.
 * @param {string[]} checkboxNames - 체크박스의 name 속성 값 배열
 * @returns {string[]} 중복이 제거된 키워드 배열
 */
function extractKeywordsFromCheckboxes(checkboxNames) {
    const keywords = new Set();
    const splitRegex = /[.*+?^${}()|[\]\\\/\s0-9]+/; // 특수문자, 공백, 숫자 기준 분할
    
    checkboxNames.forEach(name => {
        document.querySelectorAll(`input[name="${name}"]`).forEach(checkbox => {
            const label = document.querySelector(`label[for="${checkbox.id}"]`);
            if (label) {
                const rawText = label.textContent;
                const splitWords = rawText.split(splitRegex).filter(Boolean);
                splitWords.forEach(word => keywords.add(word));
            }
        });
    });
    
    return Array.from(keywords);
}

/**
 * 입력된 텍스트에서 특수문자와 숫자를 제거하고 유효 문자만 남깁니다.
 * @param {string} inputText - 원본 입력 문자열
 * @returns {string} 정제된 문자열
 */
function sanitizeInputText(inputText) {
    // 한글, 한자, 영문자만 허용하고 나머지는 제거한 후 대문자로 변환
    return inputText.replace(/[^a-zA-Z\uAC00-\uD7AF\u4E00-\u9FFF]/g, '').toUpperCase();
}

/**
 * 키워드 중복을 검증하는 메인 컨트롤러 함수
 * @param {string} inputSelector - 입력 필드의 CSS 선택자
 * @param {string[]} checkboxNames - 검증할 체크박스 name 배열
 */
function validateKeywordDuplication(inputSelector, checkboxNames) {
    const inputElement = document.querySelector(inputSelector);
    if (!inputElement) return;

    const rawInput = inputElement.value;
    const sanitizedInput = sanitizeInputText(rawInput);
    
    const validKeywords = extractKeywordsFromCheckboxes(checkboxNames);
    
    const isDuplicate = validKeywords.some(keyword => 
        keyword && sanitizedInput.includes(keyword.toUpperCase())
    );
    
    if (isDuplicate) {
        alert("중복된 카테고리 키워드가 포함되어 있습니다. 목록에서 다시 선택해 주세요.");
        inputElement.focus();
        return false;
    }
    
    return true;
}

// 실행 예시
const targetCheckboxes = ['industrialCatalogue', 'businessCatalogue'];
document.getElementById('checkBtn').addEventListener('click', () => {
    validateKeywordDuplication('#companyCatalogueDesc', targetCheckboxes);
});