Globale Änderungen an HTML-Dateien

Methode 1: VS Code Find & Replace mit RegEx

VS Code hat eine sehr mächtige Find & Replace Funktion, die mit Regular Expressions (RegEx) arbeiten kann. Das ist vermutlich die Methode, die du am häufigsten verwenden wirst.

Warum funktioniert deine RegEx-Suche nicht?

Du findest die Stellen, kannst sie aber nicht überschreiben. Das liegt wahrscheinlich daran, dass du nur die Find-Funktion Cmd+F verwendest statt Find & Replace Cmd+Shift+H.

So funktioniert Find & Replace in Files

Öffne Find & Replace mit Cmd+Shift+H (Mac) oder Ctrl+Shift+H (Windows). Du siehst dann zwei Eingabefelder:

1. Oberes Feld: Was suchst du?
2. Unteres Feld: Womit soll es ersetzt werden?

RegEx aktivieren

Klicke auf das .* Symbol rechts neben dem Suchfeld. Dadurch wird der RegEx-Modus aktiviert. Jetzt kannst du Regular Expressions verwenden.

Praktisches Beispiel: Header komplett ersetzen

Angenommen, du willst den kompletten Header-Bereich zwischen den Kommentaren ersetzen:

<!-- Header-Start -->
<header class="site-header">
    <!-- Main-Nav-Start -->
    <!-- Main-Nav-End -->
</header>
<!-- Header-End -->

Schritt 1: Der Such-Pattern

<!-- Header-Start -->[\s\S]*?<!-- Header-End -->

Schritt 2: Der Ersetzungs-Text

Ins untere Feld kommt dein neuer Header-Code, inklusive der Start- und End-Kommentare:

<!-- Header-Start -->
<header class="site-header">
    <div class="container">
        <nav class="main-nav">
            <!-- Dein neuer Header-Inhalt -->
        </nav>
    </div>
</header>
<!-- Header-End -->

Schritt 3: Vor dem Ersetzen prüfen

Bevor du auf "Replace All" klickst:

1. Schau dir die Vorschau an (VS Code zeigt alle Fundstellen)
2. Teste erst mit "Replace" für eine einzelne Datei
3. Überprüfe das Ergebnis
4. Erst dann "Replace All" für alle Dateien

Dateien gezielt filtern

Du willst nicht versehentlich JavaScript-Dateien oder andere Nicht-HTML-Dateien verändern. VS Code bietet dafür Filter-Optionen.

Files to Include

Klicke auf "..." rechts neben dem Replace-Feld und dann auf "Files to Include". Hier kannst du angeben:

Plain Text Kopieren

tutorials/**/*.html

Das bedeutet: Nur HTML-Dateien im tutorials-Ordner und allen Unterordnern.

Files to Exclude

Oder schließe bestimmte Dateien aus:

Plain Text Kopieren

**/node_modules/**, **/.git/**, **/dist/**

Weitere nützliche Filter

• *.html: Alle HTML-Dateien im aktuellen Workspace
• tutorials/html/**: Nur im html-Unterordner
• tutorials/{html,css}/**: Nur in html und css Ordnern

Praktische RegEx-Patterns für häufige Aufgaben

Pattern 1: Footer ersetzen

Suchen:

ReGex Kopieren

<!-- Footer-Start -->[\s\S]*?<!-- Footer-End -->

Ersetzen mit deinem neuen Footer-Code (inklusive Kommentare).

Pattern 2: Klassen zu allen H2-Überschriften hinzufügen

Das ist ein perfektes Beispiel für Capture Groups!

Suchen:

ReGex Kopieren

<h2>(.*?)</h2>

Ersetzen:

HTML Kopieren

<h2 class="section-title">$1</h2>

Wie funktioniert das?

• (.*?): Capture Group - speichert den Inhalt zwischen den Tags
• $1: Referenziert die erste Capture Group (den gespeicherten Inhalt)
• Das Ergebnis: Die Klasse wird hinzugefügt, aber der ursprüngliche Text bleibt erhalten

Pattern 3: Nur H2 OHNE bestehende Klassen matchen

Wenn du nur H2s ohne Klassen erwischen willst:

ReGex Kopieren

<h2(?!.*class)>(.*?)</h2>

Das (?!.*class) ist ein "Negative Lookahead" - es matcht nur, wenn KEIN "class" im Tag vorkommt.

Pattern 4: Klassen zu allen Überschriften hinzufügen

Für H2, H3 und H4 gleichzeitig:

Suchen:

ReGex Kopieren

<(h[234])>(.*?)</(h[234])>

Ersetzen:

html Kopieren

<$1 class="section-title">$2</$3>

Pattern 5: Meta-Description ersetzen (aber nicht Title)

Hier wird's tricky, weil du Title NICHT verändern willst.

Suchen (nur die Description-Zeile):

regex Kopieren

<meta name="description" content=".*?">

Aber STOP!

Das ist gefährlich, weil es alle Descriptions mit dem gleichen Text ersetzen würde. Für diesen Fall brauchst du entweder:

• Eine manuelle Überprüfung jeder Datei (Replace statt Replace All)
• Oder ein Node.js Script (siehe unten)

Pattern 6: Spezifischen CSS-Link ersetzen

Suchen:

regex Kopieren

<link rel="stylesheet" href="/assets/css/old-style\.css">

Ersetzen:

regex Kopieren

<link rel="stylesheet" href="/assets/css/style.css">

Beachte: Der Punkt vor "css" muss escaped werden \., weil Punkt in RegEx "beliebiges Zeichen" bedeutet.

Pattern 7: Script-Tags am Ende hinzufügen

Suchen (vor dem schließenden body-Tag):

regex Kopieren

(\s*)</body>

Ersetzen:

regex Kopieren

$1    <script src="/assets/js/new-script.js" defer></script>
$1</body>

Die Capture Group (\s*) erfasst die Einrückung, sodass dein neues Script korrekt eingerückt wird.

Mehrere Capture Groups verwenden

Du kannst mehrere Teile des gefundenen Texts speichern und wiederverwenden.

Beispiel: Section-Struktur umbauen

Angenommen, du hast:

html Kopieren

<div class="section">
    <h2>Titel</h2>
    <p>Inhalt</p>
</div>

Und möchtest es ändern zu:

html Kopieren

<section class="tutorials-content">
    <h2 class="section-title">Titel</h2>
    <p>Inhalt</p>
</section>

Suchen:

regex Kopieren

<div class="section">\s*<h2>(.*?)</h2>\s*([\s\S]*?)</div>

Ersetzen:

regex Kopieren

<section class="tutorials-content">
    <h2 class="section-title">$1</h2>
    $2
</section>

Hier wird $1 für den Titel und $2 für den restlichen Inhalt verwendet.

Methode 2: Terminal-Tools (sed, grep)

Für Kommandozeilen-Freunde gibt es mächtige Unix-Tools. Diese sind besonders nützlich für automatisierte Workflows oder wenn VS Code bei vielen Dateien langsam wird.

sed (Stream Editor)

Das Standard-Tool für Suchen und Ersetzen im Terminal.

Grundlegende Syntax

bash Kopieren

sed -i '' 's/SUCHEN/ERSETZEN/g' datei.html

• -i '': In-place Bearbeitung (Mac benötigt die leeren Quotes)
• s/: Substitute-Befehl
• g: Global (alle Vorkommen in jeder Zeile)

Beispiel: Klasse zu allen H2s hinzufügen

bash Kopieren

find tutorials -name "*.html" -exec sed -i '' \
  's/<h2>\(.*\)<\/h2>/<h2 class="section-title">\1<\/h2>/g' {} \;

Mehrere Zeilen mit sed ersetzen

Für mehrzeilige Ersetzungen wird sed kompliziert. Hier ein Beispiel für Header-Ersetzung:

bash Kopieren

sed -i '' '/<!-- Header-Start -->/,/<!-- Header-End -->/{
  /<!-- Header-Start -->/!{
    /<!-- Header-End -->/!d
  }
}' datei.html

Ehrlich gesagt: Für komplexe mehrzeilige Änderungen ist sed nicht ideal. Besser: VS Code oder ein Script.

grep: Vor dem Ändern prüfen

Bevor du Änderungen vornimmst, prüfe mit grep, was gefunden wird:

bash Kopieren

# Zeige alle Zeilen mit <h2> Tags
grep -r "<h2>" tutorials/

# Zähle die Vorkommen
grep -r "<h2>" tutorials/ | wc -l

# Zeige Dateinamen ohne Duplikate
grep -rl "<h2>" tutorials/

awk für komplexere Operationen

awk ist noch mächtiger, aber auch komplexer:

bash Kopieren

# Zeige nur HTML-Dateien mit <h2> ohne Klasse
awk '/<h2>[^<]*<\/h2>/' tutorials/**/*.html

Vorsicht mit Terminal-Tools!

Terminal-Befehle haben keine Undo-Funktion. Teste immer erst ohne -i Flag und prüfe die Ausgabe. Oder erstelle Backups mit:

bash Kopieren

cp -r tutorials/ tutorials-backup/

Methode 3: Node.js Scripts (Empfohlen für komplexe Änderungen)

Für komplexe Änderungen, besonders wenn du bestimmte Inhalte NICHT überschreiben willst (wie Title und Description), ist ein eigenes Script die beste Lösung.

Warum Node.js Scripts?

• Volle Kontrolle über die Logik
• Kann HTML parsen und verstehen
• Kann Bedingungen prüfen (z.B. "nur wenn keine Klasse vorhanden")
• Kann spezifische Elemente erhalten (Title, Description)
• Gut testbar und wiederverwendbar

Beispiel: Header/Footer Script

Erstelle eine Datei scripts/update-structure.js:

JavaScript Kopieren

const fs = require('fs');
const path = require('path');

// Konfiguration
const TUTORIALS_DIR = path.join(__dirname, '../tutorials');

// Dein neuer Header (als String)
const NEW_HEADER = `<!-- Header-Start -->
<header class="site-header">
    <div class="container">
        <!-- Dein neuer Header-Inhalt -->
    </div>
</header>
<!-- Header-End -->`;

// Dein neuer Footer
const NEW_FOOTER = `<!-- Footer-Start -->
<footer class="site-footer">
    <!-- Wird automatisch generiert -->
</footer>
<!-- Footer-End -->`;

// Funktion: Alle HTML-Dateien finden
function findHTMLFiles(dir, fileList = []) {
    const files = fs.readdirSync(dir);
    
    files.forEach(file => {
        const filePath = path.join(dir, file);
        const stat = fs.statSync(filePath);
        
        if (stat.isDirectory()) {
            // Rekursiv in Unterordner gehen
            findHTMLFiles(filePath, fileList);
        } else if (file.endsWith('.html')) {
            fileList.push(filePath);
        }
    });
    
    return fileList;
}

// Funktion: Header ersetzen (Title & Description bleiben erhalten!)
function updateFile(filePath) {
    let content = fs.readFileSync(filePath, 'utf-8');
    
    // Header ersetzen
    content = content.replace(
        /<!-- Header-Start -->[\s\S]*?<!-- Header-End -->/,
        NEW_HEADER
    );
    
    // Footer ersetzen
    content = content.replace(
        /<!-- Footer-Start -->[\s\S]*?<!-- Footer-End -->/,
        NEW_FOOTER
    );
    
    // Datei speichern
    fs.writeFileSync(filePath, content, 'utf-8');
    console.log(`✓ Updated: ${path.basename(filePath)}`);
}

// Hauptfunktion
function main() {
    console.log('Searching for HTML files...');
    const htmlFiles = findHTMLFiles(TUTORIALS_DIR);
    
    console.log(`Found ${htmlFiles.length} HTML files`);
    console.log('Starting updates...\n');
    
    htmlFiles.forEach(updateFile);
    
    console.log('\n✓ All files updated!');
}

// Script ausführen
main();

Script ausführen

bash Kopieren

node scripts/update-structure.js

Erweitertes Beispiel: Klassen hinzufügen nur wenn nicht vorhanden

bash Kopieren

function addClassToHeadings(filePath) {
    let content = fs.readFileSync(filePath, 'utf-8');
    let modified = false;
    
    // H2 ohne Klasse finden und Klasse hinzufügen
    const h2Pattern = /<h2(?![^>]*class)>(.*?)<\/h2>/g;
    if (h2Pattern.test(content)) {
        content = content.replace(
            h2Pattern,
            '<h2 class="section-title">$1</h2>'
        );
        modified = true;
    }
    
    // H3 behandeln
    const h3Pattern = /<h3(?![^>]*class)>(.*?)<\/h3>/g;
    if (h3Pattern.test(content)) {
        content = content.replace(
            h3Pattern,
            '<h3 class="section-title">$1</h3>'
        );
        modified = true;
    }
    
    if (modified) {
        fs.writeFileSync(filePath, content, 'utf-8');
        console.log(`✓ Updated: ${path.basename(filePath)}`);
    } else {
        console.log(`- Skipped: ${path.basename(filePath)} (no changes needed)`);
    }
}

Mit HTML-Parser arbeiten (jsdom)

Für noch präzisere Kontrolle kannst du HTML richtig parsen:

bash Kopieren

# jsdom installieren
npm install jsdom

bash Kopieren

const { JSDOM } = require('jsdom');

function updateWithParser(filePath) {
    const content = fs.readFileSync(filePath, 'utf-8');
    const dom = new JSDOM(content);
    const document = dom.window.document;
    
    // Alle H2 ohne Klasse finden
    const h2s = document.querySelectorAll('h2:not([class])');
    h2s.forEach(h2 => {
        h2.classList.add('section-title');
    });
    
    // Zurück in String konvertieren
    const updatedContent = dom.serialize();
    fs.writeFileSync(filePath, updatedContent, 'utf-8');
}

Best Practice: Dry Run Mode

Füge deinen Scripts immer einen "Dry Run" Mode hinzu, der nur anzeigt, was geändert würde, ohne die Dateien tatsächlich zu verändern.

JavaScript Kopieren

// Am Anfang der Datei
const DRY_RUN = process.argv.includes('--dry-run');

// In der Update-Funktion
function updateFile(filePath) {
    let content = fs.readFileSync(filePath, 'utf-8');
    
    // Änderungen vornehmen
    const updatedContent = content.replace(/.../, '...');
    
    if (DRY_RUN) {
        console.log(`[DRY RUN] Would update: ${path.basename(filePath)}`);
        // Optional: Zeige Unterschiede
        if (content !== updatedContent) {
            console.log('  - Changes detected');
        }
    } else {
        fs.writeFileSync(filePath, updatedContent, 'utf-8');
        console.log(`✓ Updated: ${path.basename(filePath)}`);
    }
}

Dann kannst du es erst im Dry Run Modus testen:

bash Kopieren

# Zeigt nur an, was geändert würde
node scripts/update-structure.js --dry-run

# Führt die Änderungen wirklich aus
node scripts/update-structure.js

npm Scripts in package.json

Füge deine Scripts zu package.json hinzu für einfache Ausführung:

json Kopieren

{
  "name": "devpaniczone",
  "scripts": {
    "update:structure": "node scripts/update-structure.js",
    "update:structure:dry": "node scripts/update-structure.js --dry-run",
    "update:classes": "node scripts/add-classes.js",
    "generate:nav": "node scripts/generate-navigation.js"
  }
}

Dann kannst du einfach schreiben:

bash Kopieren

npm run update:structure:dry
npm run update:structure

Welche Methode wann verwenden?

VS Code Find & Replace

Terminal-Tools (sed, awk)

Node.js Scripts

Tipps und Tricks

1. Immer mit Git arbeiten

Bevor du globale Änderungen vornimmst:

bash Kopieren

git add .
git commit -m "Before global changes"

Dann kannst du notfalls zurück:

HTML Kopieren

git reset --hard HEAD

2. Teste erst mit einer Kopie

bash Kopieren

# Kopie erstellen
cp -r tutorials/ tutorials-test/

# An Kopie testen
# Wenn's klappt, am Original durchführen

3. Verwende Case-Sensitive Search

In VS Code: Klicke auf "Aa" Button für Case-Sensitive Suche. Vermeidet ungewollte Matches.

4. Escape Special Characters in RegEx

Diese Zeichen müssen mit Backslash escaped werden:

plain text Kopieren

. * + ? ^ $ { } [ ] ( ) | \

Beispiel:

regex Kopieren

style\.css statt style.css
\(Klammer\) statt (Klammer)

5. Multiline Flag in JavaScript RegEx

In Node.js Scripts, wenn du mit Zeilenumbrüchen arbeitest:

regex Kopieren

// Falsch (matcht keine Zeilenumbrüche)
content.replace(/<header>.*<\/header>/, '...');

// Richtig (matcht auch über Zeilen hinweg)
content.replace(/<header>[\s\S]*?<\/header>/, '...');

6. Named Capture Groups (Modern RegEx)

In neueren JavaScript-Versionen kannst du Capture Groups benennen:

regex Kopieren

const pattern = /<h2>(?<title>.*?)<\/h2>/;
const match = pattern.exec(content);
console.log(match.groups.title); // Statt match[1]

7. VS Code Replace mit \n für Zeilenumbrüche

Im Replace-Feld von VS Code kannst du \n für neue Zeilen verwenden:

regex Kopieren

Suchen: (</h2>)
Ersetzen: $1\n<p>Neuer Absatz</p>

Häufige Fehler und wie du sie vermeidest

Fehler 1: Greedy vs. Non-Greedy Matching

<header>.*?</header>

<header>.*</header>

Fehler 2: Vergessen, Special Characters zu escapen

style\.css

style.css

Fehler 3: Replace All ohne Vorschau

Klicke immer erst auf einzelne Ergebnisse und prüfe die Vorschau, bevor du "Replace All" verwendest.

Fehler 4: Capture Groups falsch referenzieren

Ersetzen: <h2>$1</h2>    (VS Code, JavaScript)
Ersetzen: <h2>\1</h2>    (sed, grep)

Ersetzen: <h2>{1}</h2>     (falsche Syntax)

Fehler 5: Zeilenumbrüche nicht matchen

[\s\S]*? (matcht alles inklusive Zeilenumbrüche)

.* (matcht keine Zeilenumbrüche)

Fehler 6: In sed: Backslashes vergessen

In sed müssen Capture Groups mit Backslash escaped werden:

sed 's/<h2>\(.*\)<\/h2>/<h2>\1<\/h2>/'

sed 's/<h2>(.*)<\/h2>/<h2>$1<\/h2>/'

Quick Reference: RegEx Cheat Sheet

Praktische Workflows für DevPanicZone

Workflow 1: Neues Tutorial-Template verteilen

1. Template in einer Datei perfektionieren
2. Git commit erstellen
3. Node.js Script schreiben, das nur Header/Footer/Scripts updated
4. Script im Dry Run Modus testen
5. Script ausführen
6. git diff prüfen, dass Title/Description nicht verändert wurden

Workflow 2: Neue CSS-Klasse zu allen Überschriften

1. VS Code öffnen: Cmd+Shift+H
2. RegEx aktivieren
3. Files to Include: tutorials/**/*.html
4. Suchen: <h2(?![^>]*class)>(.*?)</h2>
5. Ersetzen: <h2 class="section-title">$1</h2>
6. Erst mit "Replace" testen (einzelne Datei)
7. Dann "Replace All"

Workflow 3: Neues Script-Tag zu allen Seiten

1. Cmd+Shift+H in VS Code
2. RegEx aktivieren
3. Suchen: (\s*)</body>
4. Ersetzen: $1 <script src="/assets/js/new-script.js" defer></script>\n$1</body>
5. Replace All

Nach globalen Änderungen: Testing

Nach großen Änderungen solltest du immer prüfen, dass nichts kaputt gegangen ist.

1. Visual Check mit Live Server

• Öffne mehrere Seiten
• Prüfe Header/Footer/Navigation
• Teste Mobile View

2. HTML Validation

Nutze den W3C Validator oder ein lokales Tool:

npm install -g html-validator-cli
html-validator tutorials/**/*.html

3. Find Broken Patterns

Suche nach häufigen Fehlern:

# Doppelte Klassen?
grep -r 'class=".*class=' tutorials/

# Unclosed Tags?
grep -r '<h2>.*<h2>' tutorials/

# Falsche Struktur?
grep -r '</h2><h2>' tutorials/

4. Git Diff Review

git diff

Scroll durch die Änderungen und prüfe, dass nur gewollte Änderungen gemacht wurden.

Zusammenfassung

Globale Änderungen an vielen HTML-Dateien müssen nicht kompliziert sein. Die wichtigsten Takeaways:

• VS Code Find & Replace Cmd+Shift+H ist dein Hauptwerkzeug für die meisten Aufgaben
• RegEx ist mächtig, aber teste immer erst einzelne Dateien
• Capture Groups $1, $2 erlauben es dir, Teile des Originals zu behalten
• Non-greedy Matching *? verhindert, dass zu viel gematcht wird
• Node.js Scripts geben dir volle Kontrolle für komplexe Logik
• Immer mit Git arbeiten, damit du Änderungen rückgängig machen kannst
• Dry Run Mode hilft, Fehler zu vermeiden

Für DevPanicZone:

• Header/Footer Updates: Node.js Script (wie generate-navigation.js)
• Klassen hinzufügen: VS Code Find & Replace
• Neue Scripts/Links einfügen: VS Code Find & Replace
• Komplexe strukturelle Änderungen: Node.js Script

Mit diesen Tools bist du bestens gerüstet, um deine Website zu warten, auch wenn sie auf 100+ Seiten anwächst!