✔ Umlaute in css-Klassen per JS ersetzen

[EduDeLuxe]

Hallo,

ich benötige mal wieder Eure Hilfe, nach fast 6 Stunden Hirnmatern komme ich einfach nicht mehr weiter ..

Ziel:
Eine Menüstruktur wird dynamisch als sortierte Liste zusammengesetzt. Hier sollen nun die Klassennamen der einzelnen Listeneinträge durch den Namen der entsprechenden Kategorie ersetzt werden.

Problem:
Einige Kategorien enthalten leider Umlaute. Das hat zur Folge, dass Klassennamen wie class="Übergrößenträger" entstehen. Dieses soll nun durch ein JS vermieden/korrigiert werden.

Lösungsansatz:
Der erste Teil des JS sucht und ersetzt die deutschen Umlaute (ä-ß und Ä-Ü) und erstehst sie durch das sogenannte 'ausgeschriebene' Äquivalent. (Dieser Teil funktioniert)

Der zweite Teil des JS soll nun die jeweilige Klasse durch den geänderten Klassennamen ergänzen - hier scheitere ich leider mit meinem begrenztem Wissen.

HTML

<ol id="topmenu">
    <li class="item">Übergrößenträger</li>
</ol>

JavaScript

// dieser Teil funktioniert
var list = document.getElementById("topmenu").getElementsByTagName("li");
var vormals = "Übergrößenträger"; //Die Variable vormals wird dynamisch befüllt
var jetzt = vormals.replace(
    /Ä/g, "Ae").replace(
    /ä/g, "ae").replace(
    /Ö/g, "Oe").replace(
    /ö/g, "oe").replace(
    /Ü/g, "Ue").replace(
    /ü/g, "ue").replace(
    /ß/g, "ss");

// dieser Teil klappt leider nicht
if (list.className == "item") {
    list.className = className + jetzt;
}

http://jsfiddle.net/AscaX/1/


Vielleicht kann mich Jemand in die richtige Richtung stoßen.
Jetzt schon vielen Dank für Eure Hilfe

Gruß
Edu

 

[tombe]

Bei dir überschneiden sich die Inhalte von "jetzt" und "vormals".

var jetzt = "Übergrößenträger";
var jetzt = jetzt.replace(
    /Ä/g, "Ae").replace(
    /ä/g, "ae").replace(
    /Ö/g, "Oe").replace(
    /ö/g, "oe").replace(
    /Ü/g, "Ue").replace(
    /ü/g, "ue").replace(
    /ß/g, "ss");

 

[EduDeLuxe]

Bei dir überschneiden sich die Inhalte von "jetzt" und "vormals".

var jetzt = "Übergrößenträger";
var jetzt = jetzt.replace(
    /Ä/g, "Ae").replace(
    /ä/g, "ae").replace(
    /Ö/g, "Oe").replace(
    /ö/g, "oe").replace(
    /Ü/g, "Ue").replace(
    /ü/g, "ue").replace(
    /ß/g, "ss");

ja, danke, ich sehe schon, dann kann man die ganze Sache auch noch weiter verkürzen,

var jetzt = "Übergrößenträger".replace(
    /Ä/g, "Ae").replace(
    /ä/g, "ae").replace(
    /Ö/g, "Oe").replace(
    /ö/g, "oe").replace(
    /Ü/g, "Ue").replace(
    /ü/g, "ue").replace(
    /ß/g, "ss");

wobei, "Übergrößenträger" weiterhin dynamisch gefüllt wird.

allerdings, löst dieses mein Problem leider noch nicht ... noch irgendein Tipp?

http://jsfiddle.net/AscaX/6/

Gruß
Edu

 

[tombe]

Schau mal ob du damit das gewünschte Ergebnis bekommst.

for (a = 0; a < document.getElementsByTagName("li").length; a++) {

	jetzt = document.getElementsByTagName("li")[a].innerHTML;

	jetzt = jetzt.replace(
			/Ä/g, "Ae").replace(
			/ä/g, "ae").replace(
			/Ö/g, "Oe").replace(
			/ö/g, "oe").replace(
			/Ü/g, "Ue").replace(
			/ü/g, "ue").replace(
			/ß/g, "ss");

	if (document.getElementsByTagName("li")[a].className == "item") {
    	document.getElementsByTagName("li")[a].className = jetzt;
	}

	document.getElementsByTagName("li")[a].innerHTML = jetzt;

}

Wobei ich mir nicht sicher bin ob die classen-Namen so richtig gebildet werden. Schreib mal zur Not ein Beispiel wie es zuerst aussieht und wie es aussehen soll.

 

[EduDeLuxe]

Schau mal ob du damit das gewünschte Ergebnis bekommst.

for (a = 0; a < document.getElementsByTagName("li").length; a++) {

	jetzt = document.getElementsByTagName("li")[a].innerHTML;

	jetzt = jetzt.replace(
			/Ä/g, "Ae").replace(
			/ä/g, "ae").replace(
			/Ö/g, "Oe").replace(
			/ö/g, "oe").replace(
			/Ü/g, "Ue").replace(
			/ü/g, "ue").replace(
			/ß/g, "ss");

	if (document.getElementsByTagName("li")[a].className == "item") {
    	document.getElementsByTagName("li")[a].className = jetzt;
	}

	document.getElementsByTagName("li")[a].innerHTML = jetzt;

}

Wobei ich mir nicht sicher bin ob die classen-Namen so richtig gebildet werden. Schreib mal zur Not ein Beispiel wie es zuerst aussieht und wie es aussehen soll.

SUPIE, vielen Dank.

jetzt wird der Kategoriename (mit ausgeschriebenen Umlauten) in die Klasse übernommen. Allerdings werden alle bestehenden Klassen dabei gelöscht.

so sieht es vorher aus:

<ol id="topmenu">
    <li class="item">Übergrößenträger</li>
</ol>

und so sollte das Ergebnis aussehen:

<ol id="topmenu">
    <li class="item Uebergroessentraeger">Übergrößenträger</li>
</ol>

momentan sieht es so aus:

<ol id="topmenu">
    <li class="Uebergroessentraeger">Übergrößenträger</li>
</ol>

Ich habe jetzt den mittleren Teil so abgeändert, was den gewünschten Erfolg brachte :-D

    if (document.getElementsByTagName("li")[a].className == "item") {
        document.getElementsByTagName("li")[a].className = document.getElementsByTagName("li")[a].className + " " + jetzt;
    }

kann man wahrscheinlich auch etwas schöner machen, aber es funktioniert.


Nochmals vielen Dank für Deine Hilfe tombe


Gruß
Edu