JS skript pro hezké a SEO friendly URL


Pojem "hezké URL" a "mod-rewrite" a jiné souvislosti zde nebudu rozebírat. Každý si o tom může najít to své na googlu (stejně, jako to dělám já). Co jsem ale marně hledal a googlil, až se museli škvařit mašinky u strýčka Google, byl nějaký JS kód, jež by krásně, efektivně a bezproblémově zvládnul přepsat veškeré české či slovenské znaky s diakritikou (čárky a háčky) do podoby hezké URL (tedy právě bez oné diakritiky, mezery nahrazeny pomlčkami, odstraněny bílé znaky atd.).

Né že bych nenašel vůbec nic, ale skripty, které jsem vygooglil, buďto neuměli všechny české znaky, neuměli je vůbec, a nebo byly strašně robustné a strašně pomalé.

A taky mi vadil jev, jež se děje docela často: názvy stránek,které obsahují v názvu mezeru, pomlčku a mezeru (tedy např. "Galerie – Příroda") se po zpracování všemi dostupnými JS skriptami nahradili třemi pomlčkami (tedy "galerie—priroda").

Proto jsem vzal jeden z dostupných skriptů a upravil jej tak, že zvládá všechny české (příp. slovenské) znaky s diakritikou (a lze jej taky doplnit o další znaky jiných abeced) a nahrazuje větší počet za sebou jdoucích pomlček pouze jednou pomlčkou (takže příklad z předchozího odstavce by vypadal "galerie-priroda").

Skript funguje tak, že do inputu, do kterého vkladáme název (stránky, galerie, etc.) přidáme onkeyup a onchange eventy s voláním metody JS generateURL(this). Tato metoda je pak zodpovědná za generování hezké URL do dalšího inputu s IDčkem "rewrite". Tento input má také event onchange s voláním metody linkChanged(). Tato metoda přepne přepínač editované URL, aby se pak již při další editaci názvu v prvním inputu nepřepsala.

Celej HTML kód si nyní ukážeme, pak zde uvedu živý příklad k vyzkoušení:

<input onkeyup="generateURL(this)" onchange="generateURL(this)" class="text" size="80" type="text" value="def value z php?" id="title" name="title" title="Název stránky" />
<input onchange="linkChanged();" class="text" size="80" type="text" value="def value z php?" id="rewrite" name="rewrite" title="Název stránky pro URL" />

A nyní živý příklad:

And that' it!

JS soubor: url.js.

Komentáře jsou uzavřeny.