유효성 검사의 연장선으로 비속어 유효성 검사를 filter를 사용해 예시를 만들어 보았다
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>비속어 필터링 예제</title>
</head>
<body>
<h1>비속어 필터링 예제</h1>
<input type="text" id="textInput" placeholder="텍스트를 입력하세요" />
<button onclick="filterText()">비속어 필터링</button>
<p id="filteredText"></p>
<script src="index.js"></script>
</body>
</html>
js
// import { badWords } from "./badwords.js";
// 비속어 필터링 함수
function filterText() {
const inputText = document.getElementById("textInput").value;
// 비속어 변수
const badWords = ["바보", "멍청이", "시바새키"];
// 비속어 유효성 검사
for (const word of badWords) {
const regex = new RegExp(word, "gi");
if (regex.test(inputText)) {
alert("비속어가 감지되었습니다!");
return;
}
}
document.getElementById("filteredText").textContent = inputText;
}
for문에 정규표현식을 사용하여 input에 변수로 지정한 비속어를 작성할시 alert창으로 알려준다.
프론트 엔드 시작하는 뉴비!