Sonderzeichen-Datenbank


Sonderzeichen bequem in einer Datenbank finden
Haben Sie für jedes HTML-Sonderzeichen die Codierung im Kopf? Mit einer Sonderzeichen-Datenbank brauchen Sie es nicht. Erfahren Sie ganz bequem beide Codierungen zu einem Zeichen oder lassen Sie das Zeichen an Hand einer Codierung ausgeben.
Frei nach dem Motto „Man muss nicht alles wissen, sondern nur wissen wo es steht.“ wollen wir uns eine Datenbank zur Auflistung aller wichtigen Sonderzeichen gönnen. Dabei fordern wir die totale Flexibilität von unserem Script. Dies bedeutet, dass Sie nur eine beliebige Eingabe tätigen müssen und das Script soll automatisch die restlichen Angaben ermitteln und anzeigen. Geben wir beispielsweise eine Codierung an, so soll das Script die zweite Codierung zusammen mit dem Sonderzeichen und einer kurzen Bezeichnung ausgeben. Andersherum können wir natürlich auch das Zeichen eingeben und erhalten beide Codierungen, sowie die besagte Sonderzeichen-Beschreibung. Wer sich lieber an den Bezeichnungen orientieren will, kann über eine Drop-Down-Liste eines der Sonderzeichen auswählen und so die jeweiligen fehlenden Angaben erhalten.
Zunächst benötigen wir natürlich ein Formular im Body des HTML-Dokuments:

001:
002:
003:
 <form name="Zeichen">
   ...
 </form>

Das Formular “Zeichen” muss uns neben der besagten Drop-Down-Liste für jede der beiden Codierungen und für das Sonderzeichen selbst ein Textfeld bereitstellen. Die Liste enthält abgesehen von den sichtbaren Bezeichnungen im „value“-Attribut das jeweilige Sonderzeichen:

001:
002:
003:
004:
005:
006:
007:
 <select name="description" size="1" id="description" onchange="getSpecialChar(0);">
   <option value="">Auswahl</option>
   <option value="!">Ausrufezeichen</option>
   <option value="&quot;">Doppeltes Anführungszeichen</option>
   ...
   <option value="ü">Kleines u mit Umlaut</option>
 </select>

Ein „onChange“-Event sorgt für einen Aufruf einer JavaScript-Funktion „getSpecialChar“, sobald ein anderes Listenelement selektiert wird. Auf die Funktion selbst wollen wir erst später zu sprechen kommen. Die Textfelder des Formulars besitzen jeweils einen Button. Jeder Button besitzt erneut einen Aufruf der Funktion „getSpecialChar“, um die jeweiligen anderen Textfelder mit den fehlenden Angaben zu ergänzen:

001:
002:
003:
004:
005:
006:
 <input name="name" size="15">
 <input type="button" value="select" onClick="getSpecialChar(1)">
 <input name="unicode" size="15">
 <input type="button" value="select" onClick="getSpecialChar(2)">
 <input name="symbol" size="5">
 <input type="button" value="select" onClick="getSpecialChar(3)">

In jedem Button, sowie auch bei der Liste, rufen wir die Funktion „getSpecialChar“ mit einem anderen Parameterwert auf. Dies ist entscheidend, damit die Funktion weiß welche Angaben noch zu berechnen sind und welche Werte zur Berechnung zur Verfügung stehen. Die Funktion unterteilt sich somit in vier Bereiche, gegliedert durch eine Fallunterscheidung mit teils ähnlichen Berechnungen. Nachfolgend betrachten wir daher nur Ausschnitte der Funktion. Das gesamte Script können Sie wie gewohnt über einen Hyperlink am Ende des Artikels herunterladen. Bevor wir zur Fallunterscheidung kommen, bedarf es einiger Vorarbeit. Um den Quellcode übersichtlicher zu gestalten, legen wir für jedes Textfelder, sowie für die Liste, eine Variable mit dem jeweiligen Inhalt der Formularelemente an:

001:
002:
003:
004:
005:
006:
 <script language="JavaScript" type="text/javascript">
 function getSpecialChar(type) {
 var descr   = document.Zeichen.description.value;
 var name    = document.Zeichen.name.value;
 var unicode = document.Zeichen.unicode.value;
 var symbol  = document.Zeichen.symbol.value;

Als nächstes benötigen wir ein Array mit allen benannten Codierungszeichen. Das Array orientiert sich dabei an die numerische Reihenfolge der Unicode-Codierung. Da nicht jedes Zeichen im Unicode eine Namenscodierung besitzt, enthält das Array einige leere Elemente, die wir mit Hilfe einer Variablen „e“ darstellen. Ferner beginnen wir erst mit dem 33. Unicode, da alle vorherigen Sonderzeichen HTML-Steuerelemente und somit nicht von Interesse sind:

001:
002:
 var e = '';
 var specialChar = new Array(e,e,"&qout;",e, … , "&yuml;");

Innerhalb der Fallunterscheidung ähneln sich besonders die Fälle 1-3. Betrachten wir daher nur den dritten und vierten Fall:

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
015:
016:
017:
018:
019:
020:
021:
022:
023:
024:
025:
     if(type == 1) {
         ...
     } else if (type == 2) {
         ...
     } else if (type == 3) {
         var selected = false;
         var uni = symbol.charCodeAt(0);
         document.Zeichen.unicode.value = "&#" + uni + ";";
         document.Zeichen.name.value = specialChar[uni - 32];
         for (var i = 1; i < document.Zeichen.description.length; i++) {
             if (document.Zeichen.description.options[i].value == symbol) {
                 document.Zeichen.description.selectedIndex = i;
                 selected = true;
             }
         }
         if (!selected)
             document.Zeichen.description.selectedIndex = 0;
     } else {
         var uni = descr.charCodeAt(0);
         document.Zeichen.unicode.value = "&#" + uni + ";";
         document.Zeichen.name.value = specialChar[uni - 32];
         document.Zeichen.symbol.value = descr;
     }
 }
 </script>

Der dritte Fall bedeutet, dass uns ein Sonderzeichensymbol vorliegt und wir beide Codierungen sowie die Bezeichnung finden müssen. Die Unicode-Codierung erhalten wir sofort in der zweiten Zeile mittels der Anweisung „charCodeAt“. Die dritte Zeile sorgt für eine Ausgabe im entsprechenden Textfeld. Sobald wir den Unicode wissen, können wir durch die am Unicode orientierte Array-Struktur sehr leicht an die zweite Codierung gelangen. Da wir die ersten 32 Sonderzeichen, wie bereits erwähnt, nicht in unserem Array berücksichtigt haben, müssen wir diesen Betrag vom Unicode abziehen, um an das richtige Array-Element zu gelangen. Das Ergebnis weisen wir direkt dem Textfeld zu. Etwas schwieriger gestaltet sich das Beziehen der richtigen Sonderzeichen-Beschreibung. Hierfür benötigen wir eine For-Schleife um jedes Listenelement der Drop-Down-Liste zu durchlaufen und dabei unser Symbol mit dem Rückgabewert jedes Listenelements zu vergleichen. Im Falle einer Übereinstimmung selektieren wir das entsprechende Element und setzen die zuvor mit „false“ initialisierte Variable „selected“ auf „true“. Kommt es zu keiner Übereinstimmung, besitzt die Variable „selected“ weiterhin den Wert „false“ und wir gelangen in den Rumpf der zweiten If-Struktur. Hier selektieren wir das erste Listenelement um dem Benutzer visuell zu signalisieren, dass wir keine Bezeichnung zum Symbol finden konnten.
Im vierten Fall unserer Fallunterscheidung befinden wir uns im Else-Zweig unserer If-Struktur. Dies trifft zu, wenn der Benutzer in der Drop-Down-Liste ein anderes Element selektiert hat. Da wir wiederum direkt das Sonderzeichensymbol von unserer Liste erhalten, können wir ohne große Mühe erneut an beide Codierungen gelangen und ebenso das Sonderzeichen selbst im entsprechenden Textfeld ausgeben.

Beispieldatei herunterladen [download=Sonderzeichen-Datenbank.zip]