Перетворення кутових скобок

Сторінка для підготовки коду та заміни кутових скобок на їх сутності. Усі математичні знаки < та > поза тегами не обробляються.

Оброблений код

Для перегляду коду скрипта натисніть кнопку нижче. Код робочий і може бути використаний за будь-де з додаванням бажаного CSS.

Скрипт, який маює бути розміщений наприкінці сторінки перед </body> . Можна і на початку, але при взаімодії з DOM при оформленні, у подальшому можуть виникнути помилки.

<script>
	/* Обробка тексту з textarea */
	function processInput() {
		const textarea = document.getElementById('code'); // Поле введення
		const input = textarea.value.trim(); // Видалення зайвих пробілів

		if (!input) {
			alert('Будь ласка, введіть текст для обробки.'); // Повідомлення про помилку
			document.getElementById('resultContainer').style.display = 'none';
			return;
		}

		// Захист від виконання HTML-коду шляхом заміни кутових скобок
		const output = input.replace(/<(\/?[^>]*?)>/g, '<$1>');

		document.getElementById('result').textContent = output; // Відображення результату
		document.getElementById('resultContainer').style.display = 'block'; // Показ результату
	}

	/* Скидання введеного тексту */
	function resetForm() {
		document.getElementById('code').value = ''; // Очищення текстового поля
		document.getElementById('resultContainer').style.display = 'none'; // Приховування результату
		document.activeElement.blur(); // Зняття фокуса з кнопки
	}

	/* Копіювання тексту в буфер обміну через кнопку */
	function copyToClipboard(button) {
		const container = button.nextElementSibling; // Знаходження наступного блоку коду
		const code = container.textContent;

		// Створення виділення для копіювання
		const range = document.createRange();
		range.selectNodeContents(container);
		const selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);

		navigator.clipboard.writeText(code) // Копіювання тексту
			.then(() => {
				alert('Код успішно скопійовано в буфер обміну!');
				setTimeout(() => selection.removeAllRanges(), 500); // Скинути виділення
			})
			.catch(err => console.error('Помилка копіювання:', err));
	}
</script>

Код HTML, який відображає реалізаію скрипта на сторінці, показаний нижче.

<!-- Кнопки для обробки тексту та скидання форми -->
	<div class="button-group">
		<button class="action-button" onclick="processInput()">Обробити</button>
		<button class="action-button" onclick="resetForm()">Скинути</button>
	</div>

	<div class="mar20-tb">
		<label class="flex flex-wrap">
			<textarea id="code" class="flex-grow3 h200px form-input" name="myform[text]" placeholder="Введіть код сюди та натисніть кнопку обробки..."></textarea>
		</label>
	</div>

	<!-- Контейнер для відображення результату -->
	<div id="resultContainer"  style="display: none;">
		<h3>Оброблений код</h3>
		<button class="copy-button" onclick="copyToClipboard(this)">Копіювати</button>
		<pre id="result"></pre>
	</div>