Как на JS реализовать фильтр нецензурных слов в чате в реальном времени?
Реализация фильтра нецензурных слов в чате на JavaScript в реальном времени — задача, которая решается на нескольких уровнях: клиентском и серверном. Ниже разберём полный подход.
## 1. Базовый список запрещённых слов
Создайте массив слов, которые нужно фильтровать:
js
const badWords = [‘слово1’, ‘слово2’, ‘слово3’];
Для реального проекта рекомендуется хранить список на сервере и подгружать его через API, чтобы пользователи не могли его просмотреть в исходном коде.
## 2. Функция замены нецензурных слов
js
function filterMessage(text) {
let filtered = text;
badWords.forEach(word => {
const regex = new RegExp(word, ‘gi’);
filtered = filtered.replace(regex, ‘*’.repeat(word.length));
});
return filtered;
}
Флаг `gi` обеспечивает регистронезависимый поиск и замену всех вхождений.
## 3. Обработка ввода в реальном времени
Подключите фильтр к событию `input` текстового поля:
js
const input = document.getElementById(‘chat-input’);
input.addEventListener(‘input’, () => {
const cursorPos = input.selectionStart;
input.value = filterMessage(input.value);
input.setSelectionRange(cursorPos, cursorPos);
});
Сохранение позиции курсора важно для удобства пользователя.
## 4. Фильтрация при отправке сообщения
js
form.addEventListener(‘submit’, (e) => {
e.preventDefault();
const cleanMessage = filterMessage(input.value.trim());
sendToChat(cleanMessage);
input.value = »;
});
## 5. Защита от обходов фильтра
Пользователи часто пытаются обойти фильтр, вставляя пробелы, цифры или спецсимволы. Добавьте нормализацию текста перед проверкой:
js
function normalize(text) {
return text
.replace(/[s-.,_]/g, »)
.replace(/0/g, ‘о’)
.replace(/3/g, ‘е’)
.toLowerCase();
}
function containsBadWord(text) {
const normalized = normalize(text);
return badWords.some(word => normalized.includes(normalize(word)));
}
## 6. Серверная валидация (Node.js)
Клиентский фильтр — лишь первый рубеж. Всегда дублируйте проверку на сервере:
js
// Node.js + Express
app.post(‘/send-message’, (req, res) => {
const { message } = req.body;
if (containsBadWord(message)) {
return res.status(400).json({ error: ‘Сообщение содержит недопустимые слова’ });
}
// сохраняем и рассылаем сообщение
});
## 7. Готовые библиотеки
Для продакшн-решений рассмотрите готовые npm-пакеты:
— **bad-words** — популярная библиотека с поддержкой кастомных списков
— **leo-profanity** — гибкая настройка и поддержка нескольких языков
js
const Filter = require(‘bad-words’);
const filter = new Filter();
console.log(filter.clean(‘текст с плохим словом’));
## Итог
Комплексный фильтр включает: список слов на сервере, нормализацию текста, клиентскую и серверную проверку, а также обработку попыток обхода. Никогда не полагайтесь только на клиентскую фильтрацию.