Stalo sa ti už niekedy, že si skopíroval text z Wordu, Google Docs alebo nejakého CMS a tvoje HTML zrazu vyzeralo ako po výbuchu? Odseky plné balastu typu
<p data-path-to-node="13,0,0"alebo
<p style="margin-bottom: 0px; line-height: 1.5;"?Ručne to mazat odsek po odseku je práca za trest. Našťastie existuje trik, ktorý ti v akomkoľvek editori (Dreamweaver, VS Code, Sublime Text, Notepad++) vyčistí stovky riadkov za menej ako 3 sekundy.
Zoznám sa s mágiou regulárnych výrazov:
<p [^>]*>🚀 Návod: Ako bleskovo vyčistiť HTML kód pomocou jediného Regex výrazu
Praktický postup si ukážeme v programe Dreamweaver, ale ostatné editory fungujú pri "nájdi a zmeň" (find and replace) rovnako.
Rýchly postup (TL;DR)
- Otvor si okno vyhľadávania a nahrádzania (Ctrl + H alebo Ctrl + F).
- Zapni možnosť Regular Expressions (ikona .* alebo zaškrtávacie políčko).
- Do políčka Find (Nájsť) vlož: <p [^>]*>
- Do políčka Replace (Nahradiť) napíš: <p>
- Klikni na: Replace All (Nahradiť všetko). Hotovo!
Ako napísať tieto znaky na klávesnici?
Znak
Slovenská klávesnica (SK)
^
AltGr + š (potom medzerník)
<
AltGr + j
>
AltGr + k
{
AltGr + B
}
AltGr + N
[
AltGr + F
]
AltGr + G
/
Shift + ù (vedľa pravého Shiftu)
\
AltGr + Q
&
AltGr + C
"
Shift + § (vedľa čísla 1)
`
AltGr + 7 (potom medzerník)
Malý tip: Pre písanie kódu si veľa vývojárov prepína klávesnicu do anglického rozloženia (EN) pomocou skratky Alt + Shift (alebo Win + Medzerník), pretože na anglickej klávesnici sú špeciálne znaky ako < > { } ^ / dostupné bez použitia AltGr.
🔍 Ako tento „vynález“ vlastne funguje?
Ako sme si už povedali, náš zdrojový kód môže byť plný nežiadúcich zápisov (starého formátovania, vlastných atribútov rôznych editorov html...) ktoré chceme zo zápisu kódu odstrániť, aby sa stal čistým (validným) a rýchlym. Na obrázku nižšie vidíme kód plný nepotrebných záznamov, na ktorý je samotnému vývojárovi ťažké sa aj len pozrieť:
Po vymazaní zbytočného obsahu:
Kód sa po odstránení balastu výrazne "prevzdušnil", zmizli všetky špeciálne atribúty (custom attribute). Nástroj, ktorý dokument spracoval (napr. Word, Rich Text editor alebo redakčný systém), tieto konkrétne atribúty používa na presnú identifikáciu polohy odseku v štruktúre dokumentu. S číslami 13,0,0 si systém interne značí „cestu“ v strome dokumentu (tzv. DOM strom): napríklad 13. hlavný blok dokumentu => jeho 1. pod-prvok => 1. textový uzol. Pre webovú konštrukciu html sú absolútne nepotrebné, preto boli upratané do koša.
Čo hovoria tie podivné Regex značky?
Pre mnohých ľudí vyzerajú regulárne výrazy (Regex) ako náhodný zhluk znakov. Keď si ich však rozmeníme na drobné, ukážu sa, ako úplne logické zápisy:
<p
Nájdime otvárací tag <p s jednou medzerou za ním. (Vďaka medzere preskočí čisté <p>).
[ ]
Hranaté zátvorky vytvárajú skupinu znakov. Editor sa pozrie na pravidlo vo vnútri.
^
Negácia (nechcem to, čo nasleduje za týmto symbolom - toto bude označené).
>
Uzatváracia zátvorka HTML tagu.
[^>]
Spolu to znamená: "Akýkoľvek znak, len NIE uzatváracia zátvorka >".
*
Opakuj: Opakuj predchádzajúce pravidlo 0-krát alebo viackrát (ber všetko, čo ti príde pod ruku).
>
Zastav sa presne vtedy, keď konečne narazíš na reálnu zátvorku >
Ľudský preklad:
"Nájdi mi <p s medzerou, poctivo označuj všetky znaky, atribúty a úvodzovky za tým, ale hneď ako uvidíš koncovú zátvorku >, označovanie ukonči."
💡 Príklady z praxe
Pozri sa, ako si tento výraz poradí s rôznym „smetím“ v kóde:
Pred: <p data-path-to-node="13,0,0">
Po: <p>
Pred: <p class="MsoNormal" style="color: red;">
Po: <p>
Pred: <p id="first-paragraph">
Po: <p>
⚠️ Na čo si dať pozor?
Uisti sa, že máš zapnutý Regex: Ak v editori nezapneš možnosť Regular Expressions, editor bude doslova hľadať text <p [^>]*> a nenájde nič. Nezmaže to už čisté <p>? Nie. Keďže v našom vzore je za p medzera (<p ), čistý tag <p> túto podmienku nespĺňa a editor ho bezpečne odignoruje.
Čo ak chcem vyčistiť aj nadpisy <h2> alebo <span>? Stačí vo výraze vymeniť p za iný tag:
Pre nadpisy: <h2 [^>]*> -> nahradiť za <h2>
Pre spany: <span [^>]*> -> nahradiť za <span>
Záver
Tráviť čas manuálnym čistením HTML kódov v roku 2026 je prežitok. Stačí si zapamätať zápis [^>]* (všetko okrem uzatváracej zátvorky) a ušetríš si hodiny nudnej práce!
... alebo ?!
Kedy použiť na čistenie kódu radšej AI ?
Ja: „Ak neviem používať Dreamweaver (ani podobný nástroj) a požiadam AI, upraví mi taký "zamorený" html kód a rovnako kvalitne ho vyčistí od balastu?“
Krátka odpoveď Ai: Áno, absolútne. Dokonca často ešte lepšie, než by to spravil ten samotný Regex.
Kým Regex v editoroch funguje ako „slepý stroj“, ktorý sa riadi iba presnými pravidlami, dnešná AI má kontextové porozumenie. Nečistí kód len na základe jedného vzorca, ale chápe jeho štruktúru.
V čom je AI často lepšia než Regex?
- Zvládne neporiadok naraz:
Regex <p [^>]*> ti vyčistí iba odseky. Ak máš ale kód zamorený balastom aj v <span>, <div>, <h2> alebo obsahuje kopec prázdnych riadkov a škaredé formátovanie, AI to všetko vyčistí v jedinom kroku. - Chápe zámysel (kontext):
Môžeš jej napríklad povedať: „Odstráň všetky zbytočné atribúty z odsekov, ale nechaj mi tam atribúty class a odkazom <a> ponechaj ich href.“ Regex by si na toto vyžadoval veľmi zložité pravidlá, pre AI je to úplná hračka. - Neopravuje len balast, ale aj chyby:
Ak máš v kóde neuzatvorený tag alebo zlú HTML štruktúru, AI ju popri čistení automaticky opraví.
Ako spraviť najlepší prompt (zadanie)?
Keď dávaš AI čistiť kód, stačí jej poslať jednoduché zadanie.
Príklad promptu:
„Vyčisti mi nasledujúci HTML kód. Odstráň z tagov všetky zbytočné atribúty ako data-path, inline štýly a pod. Zachovaj iba samotný text a základnú HTML štruktúru. Vráť mi len čistý kód.“
Má to nejaké „ALE“? (Na čo si dať pozor)
Veľkosť kódu (Tokeny): Ak máš HTML súbor, ktorý má 50 000 riadkov, vkladať ho po častiach do okna chatu s AI môže byť zdĺhavé. Vtedy je Dreamweaver alebo skript stále rýchlejší.
Kontrola výsledku: AI občas rada „kreatívne“ upraví aj samotný text (napr. opravi preklep alebo preštylizuje vetu), ak jej explicitne nepovieš: „Textovú náplň menkoveň nemontuj/nemeň.“
Žiadne komentáre:
Zverejnenie komentára