Javascript - Eigener Code Parser

Javascript - Eigener Code Parser

Realisierung

Für den Parser den ich auf dieser Seite verwende, habe ich wie schone erwähnt Javascript zur Hilfe gezogen. Wer noch keine Erfahrung mit Javascript hat, kann sich gerne meinen Javascript Crashkurs anschauen. Ich gehe wie folgt vor. Als erstes überprüfe ich ob das Dokument mit all seinen DOM Elementen geladen wurde.

document.addEventListener("DOMContentLoaded", function() {
// Weiterer Code kommt hier rein
});

Die Quelltexte werden sich alle zwischen dem PRE Tag befinden, welcher für formatierte Texte mit Leerzeichen und Zeilenumbrüchen gedacht und somit für Quelltexte perfekt ist. Wir wollen also den Inhalt zwischen aller PRE Tags.

var codes = document.getElementsByTagName("PRE");

for(var i = 0; i < codes.length; ++i)
{
var code = codes[i].innerHTML;
// Weiterer Code kommt hier rein
}

Somit haben wir schon die Struktur. Jetzt kommt das parsen/analyisieren der einzelnen Begriffe. Ich verwende ein einfaches Array für die Schlüsselwort suche.

var keywords = ["span", "int", "if", "while", "foreach", "for", "float", "double", "char ", "void", "this", "true", "false", "return"];

Das sind natürlich bei weitem nicht alle Schlüsselwörter aller Sprachen, aber es ist einfach zu erweitern. Zumal ein Code Parser nicht alle Sprachen beherrschen muss um sich ein Code Parser zu nennen. Ich habe einen Mix aus Schlüsselwörtern verschiedener Sprache, weil in diesem Blog mehrere Programmiersprachen zum Einsatz kommen.

Schlüsselwörter einpacken (Wrapping)

Jetzt kommt das eigentlich interessante. Wir wollen die Wörter hervorheben, also müssen wir die gefundenen Schlüsselwörter einpacken.

for(var x = 0; x < keywords.length; ++x)
{
if(code.indexOf(keywords[x]) !== false) 
{
code = str.replace(new RegExp(keywords[x], 'g'),  "<span>" + keywords[x] + "</span>");
}
}

// Änderungen speichern
codes[i].innerHTML = code;

Dieser Code packt alle gefundenen Schlüsselwörter in einen SPAN Tag. Dieser span Tag ist im Stylesheet so definiert, dass die Schriftfarbe blau ist.

Nächste Seite
Zeile für Zeile
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text