Wer kein CMS mit einem entsprechenden Plugin verwendet, der kann nicht mal schnell vorher festgelegte Wörter auf den Seiten, durch z.B. Affiliate-Links, ersetzen. Mit der hier vorgestellten JavaScript-Lösung, lässt sich dies schnell und sicher erledigen, da sie clientseitig direkt im Browser des Besuchers läuft und somit universell auf jeder Webseite (unabhängig vom Backend) eingebunden werden kann.

Wir bevorzugen einen eigene Lösung, um jederzeit die volle Kontrolle über das Script zu besitzen und um keine Provisionen an andere Anbieter für diese Dienste bezahlen zu müssen.

1. Eigene Lösung - Planung

  1. Das Script scannt den Textinhalt der Seite (eventuell mit späterer Einschränkung)
  2. Es soll nach vordefinierten Mustern suchen.
  3. Es ersetzt den Text durch ein <a>-Tag mit dem (Affiliate-)Link.
  4. Absicherung des Scriptes

2. erste Variante des Suchen-und-Ersetzen-Scriptes


// Konfiguration: Wort -> Link
const affiliateMap = {
    "iPhone 15": "https://dein-affiliate-link.com/iphone15",
    "Gaming Laptop": "https://dein-affiliate-link.com/laptop"
};

function autoAffiliate() {
    const bodyText = document.body.innerHTML;
    let newHTML = bodyText;

    for (const [word, link] of Object.entries(affiliateMap)) {
        // Regex für exakte Wortsuche, vermeidet Ersetzung innerhalb von HTML-Tags
        const regex = new RegExp(`\\b${word}\\b(?!([^<]*?>)|([^<>]*?<\\/a>))`, "gi");
        newHTML = newHTML.replace(regex, `<a href="${link}" target="_blank">${word}</a>`);
    }
    
    document.body.innerHTML = newHTML;
}

// Ausführen nach dem Laden der Seite
window.onload = autoAffiliate;

Das Script ist jetzt bereits voll einsatzfähig, sucht nach den definierten Wörter und ersetzt diese durch die ebenfalls definierten Links.
Das Script wird vor dem schließenden </body>-Tag eingebunden:


<script src="suchen-ersetzen.js"></script>

3. Performance verbessern

Das Ersetzen von Texten auf einer riesigen Seite kann den Browser kurzzeitig verlangsamen, wenn nach zu vielen Wörter gesucht werden muss. Um dies zu umgehen, begrenzen wir die Suche auf bestimmte Container (z.B. <main> oder <article>, in unserem Fall auf <article>).
Da die Suchmaschine Google Affiliate-Links erkennt, werden wir diese Links zusätzlich mit rel="nofollow" oder rel="sponsored" versehen, um keine SEO-Abstrafungen zu riskieren.


function replaceTextWithLinks() {
    // 1. Definiere die Ersetzungen
    const affiliateMap = {
        "iPhone 15": "https://dein-link.com/iphone15",
        "Gaming Laptop": "https://dein-link.com/laptop"
    };

    // 2. Suche den Bereich
    const article = document.querySelector('article');
    if (!article) return; // Abbruch, wenn kein Artikel vorhanden

    // 3. TreeWalker erstellen, um nur Text-Knoten zu finden
    const walker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT, null, false);

    let node;
    const nodesToReplace = [];

    // Erst alle relevanten Knoten sammeln, dann ersetzen
    while (node = walker.nextNode()) {
        for (const [word, link] of Object.entries(affiliateMap)) {
            if (node.nodeValue.includes(word)) {
                nodesToReplace.push({ node, word, link });
            }
        }
    }

    // 4. Ersetzung durchführen
    nodesToReplace.forEach(({ node, word, link }) => {
        const parent = node.parentNode;
        // Verhindere, dass wir bereits innerhalb eines Links suchen
        if (parent.tagName === 'A') return;

        const regex = new RegExp(`\\b${word}\\b`, 'gi');
        const span = document.createElement('span');
        span.innerHTML = node.nodeValue.replace(regex, `<a href="${link}" target="_blank" rel="sponsored">${word}</a>`);
        
        parent.replaceChild(span, node);
    });
}

// Ausführen, wenn DOM bereit ist
document.addEventListener('DOMContentLoaded', replaceTextWithLinks);
  • DOM-Integrität: Der TreeWalker fasst keine bestehenden HTML-Strukturen an. Er geht nur in die Text-Inhalte. Die anderen Formulare, Scripte oder andere Links auf der Webseite bleiben zu 100% funktionsfähig.
  • rel="sponsored": das rel-Attribut wurde hinzugefügt. Das ist für Google wichtig, um zu zeigen, dass es sich um bezahlte Links handelt, was die SEO-Strategie absichert.
  • Verbesserung der Performance: Die Suche läuft nur einmal über die Textknoten des Artikels. Das ist auch bei langen Texten sehr schnell.
    • Sicherheit: Die Abfrage if (parent.tagName === 'A') return; verhindert, dass das Script bereits bestehende Links "kaputt macht", falls dort zufällig dein Suchwort vorkommt.

4. Sicherheit des Scriptes

Das Script ist aus einer reinen Sicherheits-Perspektive für den Server absolut sicher, da es sich um Client-seitigen Code handelt. Das bedeutet, das Script läuft nur im Browser des Besuchers und sendet keine Daten an den Server, die dort manipuliert werden könnten.

XSS-sicher
Anstatt innerHTML zu nutzen, erstellen wir die Links sauber über das DOM-Objekt-Modell:


// ... innerhalb der Ersetzungs-Schleife ...
const regex = new RegExp(`\\b${word}\\b`, 'gi');
const parts = node.nodeValue.split(regex);
const fragment = document.createDocumentFragment();

parts.forEach((part, index) => {
    fragment.appendChild(document.createTextNode(part));
    if (index < parts.length - 1) {
        const linkElem = document.createElement('a');
        linkElem.href = link;
        linkElem.target = "_blank";
        linkElem.rel = "sponsored";
        linkElem.textContent = word;
        fragment.appendChild(linkElem);
    }
});
parent.replaceChild(fragment, node);
  • createTextNode: Hier wird jeglicher Inhalt garantiert als Text behandelt. Selbst wenn in deinem word-String Schadcode wie <script>alert(1)</script> stehen würde, würde der Browser das einfach als Text anzeigen, statt es auszuführen.
  • Keine HTML-Strings: Da keine Zeichenketten mehr als HTML zu interpretieren sind, entzieht man möglichen Angreifern die Grundlage für Injektionen.

5. Hinweise

  • Wenn Ihr sehr viele Wörter ersetzen möchtet (z.B. 50+ Affiliate-Begriffe), wird das Durchsuchen des Textes komplexer, das zu eine erhöhten Ladezeit der Webseite führen kann. Empfehlenswert sind daher nur wenige Wörter zu definieren
  • Wenn Wort-Link-Liste fest im Script hinterlegt ist, ist das die sicherste Konfiguration.
  • Da der Inhalt des Scripts von uns kontrolliert wird und keine Daten von externen (potenziell unsicheren) Quellen nachgeladen werden, gibt es keine Angriffsfläche für klassische Injection-Attacken.
  • Wartungsfreundlich: Es muss lediglich das affiliateMap-Objekt am Anfang des Scripts anpasst werden, wenn neue Wörter hinzufügt oder Links geändert werden sollen.
  • Kein "Zerschießen" der Seite: Durch das createDocumentFragment wird das DOM nicht ständig neu geladen, sondern die Knoten werden effizient ersetzt. Das minimiert das Risiko, dass andere Scripte auf der Seite durch deine Änderungen gestört werden.

6. Download

Hier könnt Ihr die vollständige suchen-und-ersetzen-mit-javascript kostenlos herunterladen und zum eigenen Gebrauch verwenden.

6-suchen-und-ersetzen-mit-javascript.zip | (723 ) // oder von Github

Viel Erfolg bei der Verwendung!