ПР / Хакова Ю. М. Отчет ПР6
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №6
«Использование регулярных выражений в языке JavaScript»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX.HTML 4
3 ЛИСТИНГ STYLE.CSS 4
4 ЛИСТИНГ SCRIPT.JS 5
5 ЗАКЛЮЧЕНИЕ 6
1 ХОД РАБОТЫ
Создаем файловую структуру проекта (Рисунок 1).
Рисунок 1 – файловая структура проекта
Файл index.html — основной файл, содержащий структуру веб-страницы. В нем осуществляется подключение внешнего CSS-файла styles.css для оформления и JavaScript-файла script.js для выполнения интерактивной логики. В теле страницы размещены заголовки и элементы интерфейса, соответствующие каждому из подзаданий.
Файл styles.css — файл, отвечающий за визуальное оформление страницы. В нём заданы стили для элементов ввода, кнопок, заголовков, а также блока вывода информации. Также реализовано визуальное выделение ошибок или предупреждений, чтобы улучшить восприятие результатов пользователем.
Файл script.js — файл, содержащий программную логику. Он реализует обработчики событий, включая действия при нажатии кнопки. Скрипт выполняет фильтрацию текста, удаление URL-ссылок, подсчёт количества запрещённых выражений, а также отображает соответствующее сообщение в зависимости от результата проверки. Логика построена с использованием регулярных выражений.
2 ЛИСТИНГ INDEX.HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Фильтрация текста</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Оставьте отзыв</h2>
<textarea id="userText" rows="8" placeholder="Введите ваш текст..."></textarea>
<button onclick="processText()">Отправить</button>
<div id="result" class="output" style="display:none;"></div>
<script src="script.js"></script>
</body>
</html>
3 ЛИСТИНГ STYLE.CSS
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f9f9f9;
}
textarea, button {
width: 100%;
padding: 10px;
margin-top: 10px;
font-size: 16px;
}
.output {
margin-top: 20px;
padding: 15px;
background-color: #e3f3e3;
border: 1px solid #c5e1c5;
}
.warning {
background-color: #ffe0e0;
border-color: #ffaaaa;
color: #b20000;
}
4 ЛИСТИНГ SCRIPT.JS
function processText() {
const input = document.getElementById("userText").value.trim();
const forbiddenWords = ["ужас", "кошмар", "глупость", "бред"];
const pattern = new RegExp(`(${forbiddenWords.join("|")})`, "gi");
const badWordsFound = [];
const urlPattern = /https?:\/\/(www\.)?[\S]+/gi;
let filteredText = input.replace(urlPattern, "[удалена ссылка]");
filteredText = filteredText.replace(pattern, (match) => {
badWordsFound.push(match.toLowerCase());
return "*".repeat(match.length);
});
const resultDiv = document.getElementById("result");
resultDiv.style.display = "block";
if (badWordsFound.length > 2) {
resultDiv.className = "output warning";
resultDiv.innerHTML = `Текст содержит ${badWordsFound.length} запрещённых слов — он не будет опубликован.`;
return;
}
resultDiv.className = "output success";
resultDiv.innerHTML = `<strong>Проверенный текст:</strong><br>${filteredText}`;
}
5 ЗАКЛЮЧЕНИЕ
В процессе выполнения практической работы была создана интерактивная веб-страница, демонстрирующая применение HTML, CSS и JavaScript для обработки пользовательского текста с использованием регулярных выражений. Реализованы два функциональных блока: фильтрация нецензурной лексики и блокировка URL-ссылок. Введённый пользователем текст обрабатывается скриптом — при наличии более двух запрещённых выражений отображается предупреждение, в противном случае текст автоматически очищается и выводится на экран. Таким образом, работа демонстрирует навыки создания пользовательского интерфейса и реализации логики валидации текста на стороне клиента.
Санкт-Петербург
2025