Vytvořeno/Created: 2002-08-30;
Změněno/Updated: 2002-09-01;
Verze/Version: 1.0;
Kontakt/Contact: Martin Kopta
Funkce powerPend() je určena jako prozatimní
náhrada k neexistujícím vlastnostem
CSS
pro MSIE.
function powerPend(beforeStart, afterStart, beforeEnd, afterEnd, tagName, attrStr)
var b,r,attrStr1=attrStr2='',i,n;
for(i=5;i<arguments.length;i++) {
attrStr1 += '('+arguments[i]+')';
attrStr2 += '$'+(i-3);
}
n = arguments.length-5;
b = document.getElementsByTagName('body')[0].innerHTML;
r = new RegExp("<"+tagName+"([^>]*?)"+attrStr1+"([^>]*)>(.*?)<\/"+tagName+">","gi");
b = b.replace(r,beforeStart+'<'+tagName+'$1'+attrStr2+'$'+(n+2)+'>'+afterStart+'$'+(n+3)+beforeEnd+'</'+tagName+'>')+afterEnd);
document.getElementsByTagName('body')[0].innerHTML = b;
}
<div>
uvnitř jiné značky <div>. V takových případech
se funkce chová jinak, než byste si přáli.
Pro tento typ nasazení je třeba využít vlastností
DOM, ty ovšem nepracují
se značkou <abbr>, kvůli které byla tato funkce
vyvinuta především.
string.replace(regExp,beforeStart).
Poznámka 1)string.replace(regExp,afterStart).
Poznámka 1)string.replace(regExp,beforeEnd).
Poznámka 1)string.replace(regExp,afterEnd).
Poznámka 1)< a >).( a )).
Poznámka 2)Takto se doplňují proměnné do textu (minimální varianta):
beforeStart<tagName>afterStartText uvnitř značek.beforeEnd</tagName>afterEnd
Takto se doplňují proměnné do textu (střední varianta varianta):
beforeStart<tagNamecokoli>afterStartText uvnitř značek.beforeEnd</tagName>afterEnd
Takto se doplňují proměnné do textu (maximální varianta):
beforeStart<tagNamecokoliattrStr1…attrStrNcokoli>afterStartText uvnitř značek.beforeEnd</tagName>afterEnd
1) Tuhle možnost využijete pro vkládání obsahu atributů. Na první attrStr v řadě se odkazuje $2, u dalších se pak číslo postupně zvyšuje až do $7.
2) Použití závorek není zcela zakázáno, ale nedoporučuji je, protože se tím změní pořadí pro $n a chování funkce se může vymknout kontrole.
Protože funkce má reálně využití jen v MSIE, měla by být spouštěna ihned po načtení jen v tomto prohlížeči:
window.onload = function() {
return (document.all) ? powerPend() : true;
}
Funkce powerPend() byla přímo v tomto dokumentu
použita pro vložení tečky před obsah značky <h2>.
Jak vidíte, proměnné attrStr není třeba definovat:
powerPend('','• ','','','h2');
Původní řetězec:
<h2>Příklady</h2>
byl skriptem změněn na:
<h2>• Příklady</h2>
Pokud u odkazů uvádíte i jazyk cílového dokumentu
jako hodnotu atributu hreflang (může být typu
en nebo en-GB), pak můžete pomocí
funkce powerPend() rozlišovat jednotlivé jazykové
verze, například tak, že zkratku jazyka vložíte do závorky
za odkaz kurzívou. Tohle je už komplexnější příklad, kde
využijeme všechny vymoženosti funkce:
powerPend('','','',' <em>($4)</em>','a','hreflang=','[\'"]?','[a-z]{2}');
Za názvem prvku 'a' specifikujeme jednotlivé
části atributu. Nejprve název atributu a znaménko rovná se
'hreflang=', potom odhlušíme uvozovky, respektive
apostrofy, respektive jejich vynechání '[\'"]?'
(pozor, innerHTML v Exploreru vrací názvy prvků
velkými písmeny a u hodnoty atributů bez mezer odstraňuje
uvozovky i apostrofy a při opakovaných průchodech funkce
doplňuje relativní cesty na absolutní). Na závěr určíme, jakou
část z hodnoty atributu požadujeme – v tomto
případě první dvě písmena ('[a-z]{2}').
Všimněte si, že jako hodnotu proměnné afterEnd funkci
předáváme odkaz na nalezené hodnoty třetí
1) proměnné typu attrStr
' <em>($4)</em>'.
Z původního zápisu:
<a href="#" hreflang="en-GB">Britský odkaz</a>
Získáváme v Exploreru záspis nový:
<a href="#" hreflang="en-GB">Britský odkaz</a> <em>(en)</em>
Stejným způsobem jsme v tomto dokumentu vypsali obsah
atributu title do závorky za zkratky.
CSS,
MSIE
a DOM.
Explorer nepodporuje značku abbr, protože
k ní nelze přistoupit ani prostřednictvím DOM, musel jsem napsat
tuhle funkci s regulárními výrazy podle návrhu
Marka Prokopa.
Text uzavřený značkou <abbr> obalíme
značkou, kterou Explorer rozezná, například span.
Zároveň do nové značky překopírujeme všechny případné atributy
značky <abbr> a přidáme atribut
class="abbr", který můžeme využít v kaskádových
stylech:
powerPend('','<span $2 class="abbr">','</span>','','abbr','[^>]+');
Z původního pro Explorer neznámého zápisu:
<abbr title="Cascading Style Sheets">CSS</abbr>
Získáme použitelnější:
<abbr title="Cascading Style Sheets"><span title="Cascading Style Sheets" class="abbr">CSS</span></abbr>
Funkce slouží svému účelu, další verze nejsou očekávány.
Element.innerHTML,
který dobře funguje kromě Exploreru také v Mozille.)