Zadání 1 – Anonymizátor osobních údajů

Vytvoř nástroj, který po stisku tlačítek Anonymizovat e-maily, Anonymizovat telefony a Anonymizovat URL nahradí tyto údaje v zadaném textu zástupnými hodnotami (např. [EMAIL], [TEL], [URL]). Tlačítko Zvýraznit anonymizace obalí zástupné hodnoty do <span class="oznac">…</span>. Tlačítko Obnovit původní vrátí text do původního stavu; Smazat vymaže výstup s potvrzením.

Cíl úlohy

  • Ovládání onclick a práce s DOM (innerHTML, value).

  • Použití podmínek if (… == true/false) a jednoduché validace (prázdný vstup).

  • Hromadná náhrada textu pomocí regulárních výrazů a funkce.

  • Zvýraznění částí textu pomocí <span> a CSS třídy.

Vstupní podmínky

  • Základní HTML dokument s textarea a výstupním blokem.

  • Vytvoř soubory index.html, style.css, main.js.

Požadovaný výstup

  • Tlačítka: Převzít text, Anonymizovat e-maily, Anonymizovat telefony, Anonymizovat URL, Zvýraznit anonymizace, Obnovit původní, Smazat.

  • Při pokusu o anonymizaci bez textu vypiš hlášku.

  • „Zvýraznit anonymizace“ nic nedělá, pokud zástupné hodnoty v textu nejsou.

  • Krátké české komentáře v JS.

Doplňující pokyny

  • Použij sémantické prvky (main, section, h1, button).

  • Jednoduché názvy tříd/ID, čisté odsazení.

  • Nepřidávej vizuální efekty bez funkčního významu.

Co nahradít čím.
Regex Co hledá Proč tam je Příklad shody
& znak & ochrana proti HTML, aby se znak nezpracoval jako HTML entita &
< znak < zabrání vložení HTML značek <script>
> znak > zabrání vložení HTML značek >
/\n/g znak nového řádku zachová řádkování textu z textarea ve výstupu (Enter v textu)
/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/ig e-mailovou adresu anonymizace e-mailů jana.nova@example.com
/\b(?:\+?\d{1,3}\s?)?(?:\d{3}\s?\d{3}\s?\d{3,4})\b/g telefonní číslo anonymizace telefonů 777 123 456, +420777123456
/\bhttps?:\/\/[^\s<]+/ig URL adresu anonymizace webových odkazů https://moje-domena.cz
/EMAIL/g text [EMAIL] zvýraznění anonymizovaného e-mailu [EMAIL]
/TEL/g text [TEL] zvýraznění anonymizovaného telefonu [TEL]
/URL/g text [URL] zvýraznění anonymizované URL [URL]