Karakterhivatkozás átalakításakor először azt írd le, milyen szöveget szeretnél látni, és milyen formátumú a bemenet. Egy kisebbjel megjelenítése és az „<” betűsor szó szerinti kiírása eltérő HTML-forrást kíván. Ebből látható, mikor történt meg a kódolás egyszer vagy kétszer.
A leggyakoribb karakterhivatkozások
A kisebbjel HTML-forrásban <, az ampersand & alakban is megadható. A böngésző a hivatkozást megjelenítéskor a megfelelő karakterré alakítja. A „3 < 5 & 8 > 6” szöveg kódolt változata például „3 < 5 & 8 > 6”.
A forráskód hossza ettől nő, a látható szöveg karakterei viszont ugyanazok maradnak. Ezért az entitásokkal teli forrás karakterszáma eltérhet attól, amit az olvasó a képernyőn lát.
A kétszeri kódolás tünete
Ha a már kódolt < szöveget ismét kódolod, &lt; lesz belőle. HTML-szövegként egyszer feldolgozva ebből a látható „<” betűsor lesz a kívánt „<” jel helyett. A feldolgozás során kapott ampersandot ugyanazon karakterhivatkozás-feldolgozási lépés nem kezdi újra értelmezni. Ez gyakori jel arra, hogy a feldolgozási láncban ugyanazt a lépést kétszer végezték el.
Az ellenkező irányban az ismételt dekódolás is megváltoztathatja a jelentést. Általános „dekódolj mindent addig, amíg változik” szabály helyett ismerd a bemenet és a kimenet formátumát. A tárolt nyers szöveg és a HTML-be illesztett megjelenítés külön réteg legyen.
A beillesztési hely számít
A HTML-szövegbe, attribútumba, URL-be vagy JavaScript-kódba illesztés eltérő kezelést igényelhet. Egy HTML-entitás-átváltó önmagában nem általános biztonsági szűrő minden környezetre. Szöveges DOM-tartalomnál a textContent használata megfelelő út lehet, mert a bevitt karaktereket szövegként kezeli.
A kalkulátorral a kódolási és dekódolási lépést ellenőrizd, majd nézd meg a tényleges megjelenítést is. Próbálj kisebbjelet, ampersandot, idézőjelet és ékezetes szöveget; így a dupla kódolás hamar felismerhető.
A kívánt szöveg és a HTML-forrás külön oszlopban
A következő táblázat HTML-dokumentum szöveges részébe illesztett forrásra vonatkozik. A bal oldali jeleket szeretnénk látni a böngészőben; a jobb oldali betűsort kell a HTML-forrásba írni.
| Kívánt látható szöveg | Hozzá tartozó HTML-forrás |
|---|---|
| & | & |
| < | < |
| < | &lt; |
| R&D | R&D |
Az R&D három karakter, a hozzá tartozó R&D forrásszöveg hét karakter. Ez a különbség a forrás és a megjelenített szöveg eltérő méréséből adódik. Ha egy súgóban éppen a négykarakteres < alakot akarod bemutatni, az &lt; forrás helyes, ezért a látható karakterhivatkozás önmagában még nem bizonyít hibát. Előbb a kívánt megjelenítést tisztázd.
A textContent tulajdonságnak közvetlenül a kívánt szöveget add: HTML-karakterhivatkozásokat nem dolgoz fel. Ott az < bemenet szó szerint < marad. A szöveges DOM-beillesztést és a HTML-forrás előállítását ezért két külön műveletként teszteld.
Kapcsolódó DG Kalkulátor megnyitása
Forrás és módszertani háttér
A számpéldák saját szemléltető számítások.
Háromkérdéses tudáspróba
Válassz kérdésenként egy választ, és jegyezd fel az A, B vagy C betűt. Előbb oldd meg mindhárom feladatot, utána nézd meg a megoldásokat.
1. Melyik karakterhivatkozás jelöli az ampersandot?
- A) <
- B) &
- C) >
2. Mire utalhat a látható „<” a várt kisebbjel helyén?
- A) Biztosan rossz betűtípusra
- B) Nulla karakterre
- C) Kétszeri kódolásra
3. Egy HTML-súgóban a négykarakteres „<” szöveget szeretnéd szó szerint megjeleníteni. Melyik forrás megfelelő a HTML szöveges részében?
- A) <
- B) &lt;
- C) Mindkettő ugyanazt a látható szöveget adja
Megoldások és önálló pontozás
Minden helyes válasz 1 pont; a hibás vagy kihagyott válasz 0 pont. Legfeljebb 3 pont szerezhető. 3 pont: Elkülönítetted a megjelenítendő szöveget és a HTML-forrást, és az egyszeri feldolgozás eredményéből döntöttél. 2 pont: nézd át az eltévesztett kérdésnél megnevezett részt, és számold újra annak példáját. 0–1 pont: haladj végig a három megoldáson, majd oldd meg újra a kérdéseket. Ez a rövid próba a cikk összefüggéseinek megértését ellenőrzi.
1. megoldás
B) & – Az & a & jelet jeleníti meg HTML-ben. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: A leggyakoribb karakterhivatkozások.
2. megoldás
C) Kétszeri kódolásra – A már kódolt ampersand újbóli kódolása ezt eredményezheti. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: A kétszeri kódolás tünete.
3. megoldás
B) &lt; – Az &lt; egyszeri HTML-feldolgozása az < betűsort adja. A < forrásból kisebbjel lesz. A megfelelő alakot a kívánt látható szöveg dönti el. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: A kívánt szöveg és a HTML-forrás külön oszlopban.