Skip to content
Find email addresses in web pages and turn them into clickable <a href=mailto...>
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
create-mailto.js
test.html

README.md

create-mailto

A small jquery/javascript file to find email addresses in web pages and turn them into clickable <a href=mailto...>.

It is common to avoid using <a href=mailto...> in web pages to prevent spammers from harvesting your email address. If you put your email address in plain text on the page and add markup to identify it, the javascript file will add additional <a> markup to turn it into a normal "clickable" anchor element.

To use, add the javascript file to your page:

<script src="create-mailto.js">

Then, in the web page, add markup to your email addresses:

<span class="email">youremail@example.com</span>

That's it!

If you use microformats or microdata, you can use the class names mandated by those standards, without adding any additional markup:

using microformats hCard 1.0
this <span class="email">youremail@example.com</span>
becomes <span class="email"><a href="mailto:youremail@example.com">youremail@example.com</a></span>
using microformats2 hcard
this <span class="p-email">youremail@example.com</span>
becomes <span class="p-email"><a href="mailto:youremail@example.com">youremail@example.com</a></span>
using schema.org person microdata
this <span itemprop="email">youremail@example.com</itemprop>
becomes <span itemprop="email"><a href="mailto:youremail@example.com">youremail@example.com</a></span>

You can also use this script in situations where the email address does not appear in the web page, by using data-*. Just add a data-email attribute to your element:

using text that is not an email address
this <span data-email="youremail@example.com">email me</span>
becomes <span data-email="youremail@example.com"><a href="mailto:youremail@example.com">email me</a></span>
using an image element
this <img src="foo.jpg" alt="email me" data-email="youremail@example.com">
becomes <a href="youremail@example.com"><img src="foo.jpg" alt="email me" data-email="youremail@example.com"></a>
You can’t perform that action at this time.