Wiki-Seite falsch verlinkt?

[Rolf B]

Hallo JimKnopf,

In diesem Fall war ich auf der Suche nach einem HTML-Tool, das mir zu einem HTML-Dokument eine alphabetisch geordnete Liste aller vorkommenden Klassennamen erzeugt. An der Liste könnte ich schnell erkennen, ob ich mich irgendwo bei einem Klassennamen vertippt habe

Das ist aber nur ein Drittel der Miete. Denn du kannst Dich auch im CSS vertippen. Eine vollständige Lösung müsste also die Stylesheets durchnudeln, darin alle Regeln finden und dort die Selektoren nach Klassenselektoren durchforsten. Brrr.

Was dann noch hinzukommt, ist die Verwendung von Klassen in JavaScript. Du kannst im Script Klassen hinzufügen und entfernen und mit Hilfe von Klassen nach Elementen suchen.

Aber, was auch immer es wert ist, diese Funktion sollte Dir ein Array mit allen im HTML verwendeten Klassen liefern. Die Sortierung ist case-insensitive.

function findAllClasses() {
	const classes = new Set();
  for (const node of document.querySelectorAll("[class]")) {
	  for (const classname of node.classList.values()) {
	    classes.add(classname);
    }
  }
  const collator = new Intl.Collator("de-de", { sensitivity: 'accent'});
  return [...classes.values()].sort((a,b) => collator.compare(a,b));
}

Im einfachsten Fall setzt Du diese Funktion in ein <script> Element am Ende deines Body und fügst dahinter noch einen Aufruf ein:

console.log(findAllClasses());

In der Browserkonsole erscheint dann die Klassenliste.

Rolf