Skip to content
Coastal Healthcare Advocates

Module: email

Builds email and phone links at runtime to hide them from harvesters.

Neither the email address nor the phone number appears whole anywhere in the HTML or this JavaScript. Spam bots that scan page source for @, mailto:, tel: or a ten-digit number therefore find nothing to collect.

Authored markup

<a href="#intake" data-email-user="info"
   data-email-domain="coastalhealthcareadvocates.org">Email us</a>

<a href="#intake" data-tel-area="757" data-tel-line="5740771">Call us</a>

The href and link text are the no-JavaScript fallback: they send the visitor to the contact form instead.

What this script turns them into

  • Email link: href becomes mailto:info@…. The link's text — or, if present, the text of a [data-email-text] child (so an icon beside the text survives) — becomes the address. A <wbr> (optional line break) is placed before the @ so a long address can wrap on narrow screens.
  • Phone link: href becomes tel:+17575740771. The link's text — or, if present, a [data-tel-text] child's (so a leading "Call " survives) — becomes (757) 574-0771.

The data-* attributes are removed once a link is built, so running the builder again over the same markup is harmless.

Loading

A classic <script defer> in every page's <head>. Deferred scripts run in order once parsing finishes, so the whole page, the shared header and footer included, is in the document by the time this runs. Markup added later (for example by contact-form.js) is handled by calling window.chaEmailLinks(root).

Written in ES5 inside an IIFE (immediately-invoked function expression) so none of its variables leak into the global scope.

Source:

Methods

(inner) build(rootopt) → {void}

Converts every obfuscated email and phone link inside root into a real, clickable mailto: / tel: link.

Exposed globally as window.chaEmailLinks.

Parameters:
Name Type Attributes Default Description
root ParentNode <optional>
 document

Element (or document) to search within.
Source:
Returns:
Type
void