[DOM] JavaScript를 사용하여 금칙어 검사하기

금칙어 검사

먼저 금칙어 검사를 할 입력 필드를 선택합니다. 아래 코드는 'name-input' 클래스를 가진 입력 태그를 선택합니다.

let nameInput = document.querySelector(".name-input"); // 입력 태그 선택

그리고 금칙어가 감지될 경우 경고 메시지를 출력할 태그를 선택합니다. 

let warningMessage = document.querySelector(".warning-message"); // 출력 태그 선택

'addEventListener 메서드를 사용하여 입력 필드에서 텍스트가 입력될  때 실행될 함수를 정의합니다.

nameInput.addEventListener("input", function () {
    // 입력된 텍스트 가져오기
    let inputStr = nameInput.value;
    // 입력된 텍스트를 소문자로 변환
    let smallChar = inputStr.toLowerCase();

    // 금칙어 검사
    if (smallChar.includes("test")) {
        // 금칙어 발견 시 경고 메시지 출력
        warningMessage.innerHTML = "경고: 'test'가 포함되어 있습니다.";
    } else {
        // 금칙어가 없으면 경고 메시지 지우기
        warningMessage.innerHTML = "";
    }
});

이렇게 설정하면 사용자가 입력한 텍스트에 "test"가 포함되면 경고 메시지가 표시되고, 그렇지 않으면 메시지가 지워집니다. 이렇게 금칙어를 검사하여 더 나은 사용자 경험을 제공할 수 있습니다.