Arobase

Simple and lightweight email obfuscator library for modern browsers

Download .zip Download .tar.gz View on GitHub

Arobase

http://jexhson.github.io/arobase/

Arobase is a simple and lightweight email obfuscator library for modern browsers. It tries to obfuscate email addresses on a web page from bots but keep it readable for human: transform characters into HTML numbers and insert random padding (non printable characters) between letters. By default it also append the page hostname to the address.

Basic Usage

Before you try anything, you need to include arobase.min.js in your page, via the usual tags:

<script src="arobase.min.js" async></script>

Then you can obfuscate an email address by simply adding a class arobase to an element:

<address class="arobase">john.doe</address>

This will render a clickable email like john.doe@<current_page_domain>.

Arobase is also available via npm and bower.

Options

Options are set using HTML attributes (such as data-domain). All options can be combined together.

Mailbox

To customize the mailbox (the part before @) just add a data-mailbox. It allows you to set a custom text if JavaScript is disable.

<address class="arobase" data-mailbox="john.doe">
    Oops JS not activated
</address>

This will render as previously.

Domain

To set a custom domain (the part just after @ but before the last .) just add a data-domain.

<address class="arobase" data-domain="example">
    john.doe
</address>

This will render an email like john.doe@example.<current_tld>.

If current page have not top level domain (like localhost), the dot and the tld parts are skipped.

Top level domain (tld)

To set a custom top level domain (like .com or .net) just add a data-tld.

<address class="arobase" data-tld="foo">john.doe</address>

This will render an email like john.doe@<current_domain>.foo.

Warning: this does not remove the current TLD, if your <current_domain> is example.com and you set data-tld="foo" it will display john.doe@example.com.foo. If you just want to display john.doe@example.foo you must define data-domain.

Displayed text

Displayed email link text can be set manually with the data-text option. This option works with any other options.

<address class="arobase" data-text="contact me">john.doe</address>

This will render a clickable obfuscated email like in any other case but display "contact me".

License

Arobase is released under the MIT License. See LICENSE file for details.

Links

The official site for the library is at http://jexhson.github.io/arobase/.