E-Mail-Adressen mit jQuery schützen

Immer mehr Bots durchsuchen das Internet nach E-Mail-Adressen. Möchte man beispielsweise im Impressum seine Adresse hinterlegen, sollte man sie schützen bzw. tarnen, sodass Bots nichts damit anfangen können.

Es existieren viele Möglichkeiten seine E-Mail-Adresse zu schützen, doch alle haben Nachteile:

1. Methoden sind nicht effizient (Unicode, HEX)
2. Benutzerfreundlichkeit bleibt auf der Strecke (Bild, Nutzung von Phrasen wie PUNKT)
3. Nicht für alle Browser geeignet (CSS-Techniken)

Mittlerweile setzt fast jede Homepage Javascript voraus und es sollte nicht mehr viele Leute geben, die Javascript generell deaktiviert haben. Diese Eigenschaft kann man sich zunutze machen und seine E-Mail-Adressen per Javascript schützen. Für den minimalen Anteil mit deaktiviertem Javascript kann man noch eine Ausweichlösung einbauen.

Als erstes benötigen wir den HTML-Code:

[javascript]<a class="email" rel="tobi/antary.de" href="#"></a>;
<noscript>tobi (AT) antary (PUNKT) de</noscript>[/javascript]

Falls Javascript deaktiviert ist, erscheint “tobi (AT) antary (PUNKT) de”.

Anschließend wird jQuery eingebunden und das erforderliche Javascript ausgeführt:

[javascript]<script type="text/javascript" src="/PfadZu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// E-Mail Adresse anzeigen
$(‘a.email’).each(function() {
e = this.rel.replace(‘/’,’@’);
this.href = ‘mailto:’ + e;
$(this).text(e);
});

});
</script>[/javascript]

jQuery sucht nach allen Links mit der Klasse “email”. Nun wird bei jedem dieser Links das “rel-Attribut” geparst und der “Slash” durch ein “At-Zeichen” ersetzt. Anschließend wird das “href-Attribut” mit dem korrekten E-Mail-Link versehen und die Adresse als Linkname eingefügt.