Buch druckenBuch drucken

Alternativy seminářového úkolu 4

Website: Moodle ZČU
Kurs: Sada úloh pro procvičení v předmětu KVD/PGM1P (BP Vítek Dolný)
Buch: Alternativy seminářového úkolu 4
Gedruckt von: Nepřihlášený host
Datum: Montag, 19. Oktober 2026, 03:23

Inhaltsverzeichnis

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]

Anonymizátor osobních údajů

Vstup

Výstup

Řešení úlohy – Anonymizátor osobních údajů

Co je zde splněno

  • Klikací tlačítka s onclick, validace prázdného vstupu a potvrzení smazání.

  • Hromadná náhrada přes regex + počítání nahrazených výskytů.

  • Zvýraznění anonymizovaných částí pomocí třídy .oznac.

  • Návrat k původnímu textu.

Poznámky

  • Regexy jsou zjednodušené pro výukové účely, v praxi je problematika detekce e-mailů/telefonů složitější.

  • white-space: pre-wrap uchová zalomení řádků z původního textu.

Zadání 2 – Přepis tónu textu: neformální na formální

Vytvoř mini editor, který dokáže převést běžný neformální text do formálnější podoby. Tlačítkem Zformálnit nahradí vybrané „hovorové“ výrazy formálnějšími (např. „Ahoj“ → „Dobrý den“, „Chci“ → „Rád bych“, „Dík“ → „Děkuji“). Tlačítko Zpřátelit provede opačné náhrady (formální → neformální). Tlačítkem Označit změny se změněná slova obalí <span class="zmena">…</span>. Obnovit původní vrátí původní text a Smazat vše vymaže s potvrzením.

Cíl úlohy

  • Procvičit onclick, podmínky a práci s DOM.

  • Umět hromadně nahrazovat více výrazů a řetězců.

  • Zvýrazňovat změny ve výstupu pomocí třídy a jednoduchého CSS.

  • Dodržet validaci: bez textu se žádná akce nevykoná a zobrazí se informace.

Vstupní podmínky

  • Základní HTML kostra + soubory index.html, style.css, main.js.

Požadovaný výstup

  • Tlačítka: Převzít text, Zformálnit, Zpřátelit, Označit změny, Obnovit původní, Smazat.

  • Minimálně 6 párů náhrad obousměrně (neformální ↔ formální).

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

Doplňující pokyny

  • Sémantika (main, section, h1).

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

  • Nepoužívej šipkové funkce ani zkrácené zápisy podmínek.

Co nahradít čím.
Regex Co hledá Proč tam je Příklad shody
\bAhoj\b slovo „Ahoj“ jako celé slovo aby se neměnilo něco jako „Ahojky“ Ahoj
\bČau\b slovo „Čau“ jako celé slovo totéž jako u Ahoj Čau
\bDík(y)?\b „Dík“ nebo „Díky“ (y)? znamená „písmeno y je volitelné“ Dík, Díky
\bChci\b slovo „Chci“ zformálnění Chci
\bMůžu\b slovo „Můžu“ zformálnění Můžu
\bNemůžu\b slovo „Nemůžu“ zformálnění Nemůžu
\bDobrý den\b frázi „Dobrý den“ zpřátelení (opačný směr) Dobrý den
\bDěkuji\b slovo „Děkuji“ zpřátelení Děkuji
\bRád bych\b frázi „Rád bych“ zpřátelení Rád bych
\bMohu\b slovo „Mohu“ zpřátelení Mohu
\bNemohu\b slovo „Nemohu“ zpřátelení Nemohu
\b...\b hranice slova zajistí “celé slovo”, ne část slova Chci ano, Nechci ne
g (příznak) globálně najde všechny výskyty, ne jen první Ahoj Ahoj
i (příznak) bez ohledu na velikost ahoj i Ahoj AHOJ

Přepis tónu textu

Vstup

Výstup

Řešení úlohy 2 – Čistič textu

Co je zde splněno

  • onclick události, podmínky if (… == false/true) a validace.

  • Hromadné náhrady oběma směry (neformální ↔ formální).

  • Zvýraznění vybraných frází třídou .zmena.

  • Obnovení původního textu a potvrzované smazání.

Poznámky

  • Náhrady jsou zjednodušené pro učení. V praxi by bylo vhodné doplnit širší slovník a pečlivější definici hranic slov.

  • Pokud chceš zvýraznit všechny změněné fráze dynamicky, můžeš po záměnách doplnit další replace obalující výsledné výrazy do <span class="zmena">…</span>.