How to hide your Email address on the webpage

You have a website where you want to put your email address on it so that others can easily contact you. However, you are worried that spam may flow in like a flood once the email address is published.

You are right. Currently, crawlers crawling email addresses on the internet can easily obtain your emails by using a simple regular expression. However, you may use some simple CSS and JavaScript to cheat some less intelligent crawlers. (Note * web crawlers are indeed full of the Internet. For more information, see: humans only account for less than 40% of Internet traffic)

1. Use CSS to hide the email address 1a. Use the CSS pseudo class (pseudo-classes)

You can use the following pseudo elements in CSS: before AND: after to insert the email user name and @ domain name on the other side. Web Spider generally does not see CSS until the browser renders, he can only see one @ symbol. In this example we will hide the john@gmail.com

<Style> my-email: after {content: attr (data-domain);} my-email: before {content: attr (data-user );} </style> <! -- Use data-user and data-domain to set the email user name and domain name --> <my-email data-user = "john" data-domain = "gmail.com" >@</my -email>

Update: This is another version recommended by @ orlie. This is even more obscure for crawlers because it hides.

<Style> my-email: after {content: attr (data-domain);} my-email: before {content: attr (data-user) & quot; \ 0040 & quot; ;}</style> <! -- Use data-user and data-domain to set the email user name and domain name --> <my-email data-user = "john" data-domain = "gmail.com"> </my- email>

The preceding solution has a defect that users cannot select or copy your email address on your webpage. They can only manually write it down.

If you want to make the user experience better, that is, to allow users to select these pseudo elements, you can also use the following method, only "@" is not optional:

<style> .domain::before { content: "\0040"; /* Unicode character for @ symbol */ } </style> john<span class="domain">abc.com</span> 

1b. inverted output

You can output your email address in reverse order (john@abc.com as moc. CBA @ nhoj) and then let the browser output text in reverse order through the unicode-bidi and direction CSS attributes. These texts are optional, but copied in reverse order.

<style> .reverse { unicode-bidi: bidi-override; direction: rtl; } </style> <span class="reverse">moc.cba@nhoj</span> 

1c. Disable display)

You can output extra characters in your email address, and hide these characters using the display attribute to display the real email address.

<Style ># dummy {display: none ;}</style> <! -- You can add any number of z tags --> john <span id = "dummy"> REMOVE </span> @ abc <span id = "dummy"> REMOVE </span>. com

2. Use JavaScript to confuse email 2a. Use 'onclick' event

Then you can output your email address in the mailto link. You only need to replace it with some text prompts: The characters like '.' and '@' can be replaced by text. Then add an onclick event to convert these special values.

<A href = "mailto: johnATgmailDOTcom" onclick = "this. href = this. href. replace (//,'@'). replace (/DOT /,'. ') "> contact me </a>

2b. disordered Array

Divide your email address into arrays of multiple parts, use JavaScript to output the correct order, and then add the. innerHTML attribute to the webpage.

<span id="email"></span> 〈script〉  var parts = ["john", "abc", "com", ".", "@"];  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];  document.getElementById("email").innerHTML=email;〈/script〉

 

3. WordPress + PHP

If you are using WordPress, you can also use the Built-in anti-crawler plug-in to encode (encrypt) your email address. This plug-in will convert characters into HTML encoding (for example, the letter a becomes a and the symbol @ becomes @) these characters can be directly displayed on the web page.

<?php echo antispambot("john@abc.com"); ?> 

You can also encode the code on the browser.

Finally, if you really don't want web crawlers to see your email address and don't put it on the webpage, you can try Google's reCAPTCHA service. It will hide your email behind the CAPTCHA. Only the correct verification code can be entered to view the email address.