En este tutorial aprenderás cómo ocultar tu dirección de email de tu sitio web de los molestos spambots y es que realmente es un dolor de cabeza cuando el spam toca la bandeja de entrada de tu correo electrónico. Existen varias técnicas para ocultar la dirección de email, te mostraré una de ellas usando JavaScript. Sin más, manos a la obra.
Requisitos previos
- Contar con un proyecto web
- Editor de textos como VSCode
Para este ejemplo primero debes de dividir la dirección de correo electrónico que quieres ocultar en varias partes, cada parte dividida la vas a guardar en una variable, crearás una función llamada joinEmail() que se encargará de unir cada uno de las partes antes creadas, crearás otra función ahora llamada showEmail() que será la encargada de mostrar la dirección de correo en el navegador web la cual ya estará completa, por último en el cuerpo de la página web se llama a la función showEmail().
Con tu editor de textos abre tu proyecto web y al final de la etiqueta <head></head> agrega el siguiente script, recuerda cambiar y dividir la dirección de email que vas a usar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidde email address</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script language="JavaScript">
part1 = "alfredo"
part2 = "."
part3 = "morales"
part4 = "@"
part5 = "gmail"
part6 = "."
part7 = "com"
function joinEmail(){
return part1 + part2 + part3 + part4 + part5 + part6 + part7
}
function showEmail(){
document.write("<a href='mailto:" + joinEmail() + "'>" + joinEmail() + "</a>")
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-13 text-center">
<a target="_blank" href="<script>showEmail()</script>"><script>showEmail()</script></a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
Si pruebas este archivo en el navegador web, verás que se muestra el correo electrónico pero es llamado desde la función en JavaScript por lo que los spambots no lo verán y cuando das click en el enlace se abre la ventana de correo electrónico nuevo.
Conclusión
En este tutorial aprendiste cómo ocultar la dirección de email de tu sitio web de los spambots usando JavaScript. Como te mencioné anteriormente existen varias maneras de ocultar el correo, esta es una de ellas y la que más utilizo en mis proyectos. Si este tutorial fue de ayuda te invito a compartirlo en tus redes sociales para llegar a más personas y si tienes dudas o comentarios déjalos en la caja de comentarios, estaré al pendiente de ellos. Saludos.
Te puede interesar:
CRUD con el stack MEAN.
JavaScript.
