Nickolay.info. JavaScript. Кодируем адрес E-mail и оцениваем валидность URL через JavaScript

Как средствами JavaScript защитить адрес E-mail от сканирования?
Как скриптом проверить валидность E-mail и/или URL-адреса?

Сначала ответим на второй вопрос, как более простой. Начиная с версии 1.2 JavaScript, подобно Perl'у и PHP, поддерживает регулярные выражения. Хотя проверка полной спецификации адреса E-mail или URL - дело довольно трудоемкое, в 99% случаев можно обойтись несложными выражениями вроде

^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$  - для E-mail;
/^(?:(?:https?|http|ftp):\/\/(?:[a-z0-9_-]{1,32}(?::[a-z0-9_-]{1,32})?@)?)?(?:(?:[a-z0-9-]{1,128}\.)+(?:com|net|org|mil|edu|arpa|ru|gov|biz|info|aero|inc|name|[a-z]{2})|(?!0)(?:(?!0[^.]|255)[0-9]{1,3}\.){3}(?!0|255)[0-9]{1,3})(?:\/[a-z0-9.,_@%&?+=\~\/-]*)?(?:#[^ \'\"&<>]*)?$/i  - для URL;
/(^\s+)|(\s+$)/g  - для удаления лишних пробелов, поскольку стандартной функции для этого нет;

Замечу, что если строчные и прописные буквы обрабатываются Вашими серверами как разные, а Вы хотите писать адрес именно Vasya.Pupkin@mail.ru, а не vasya.pupkin@mail.ru, проверка допустимости адреса E-mail примет вид

^[_.0-9A-Za-z-]+@([0-9A-Za-z][0-9A-Za-z_-]+.)+[A-Za-z]{2,4}$

- ну и остальные регулярные выражения можно изменить аналогичным образом.

Остается подготовить необходимые функции:

<script type="text/javascript">
 function trim(string) { //Удаляем лишние пробелы из строки
  return string.replace (/(^\s+)|(\s+$)/g, "");
 }

 function validEmail (mail) { //Проверяем корректность адреса почты
  return (new RegExp ("^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$").test(mail) ? 1 : 0);
 }

 function validURL (url) { //Проверяем корректность URL-адреса с протоколом https, http или ftp
  var template = /^(?:(?:https?|http|ftp):\/\/(?:[a-z0-9_-]{1,32}(?::[a-z0-9_-]{1,32})?@)?)?(?:(?:[a-z0-9-]{1,128}\.)+(?:com|net|org|mil|edu|arpa|ru|gov|biz|info|aero|inc|name|[a-z]{2})|(?!0)(?:(?!0[^.]|255)[0-9]{1,3}\.){3}(?!0|255)[0-9]{1,3})(?:\/[a-z0-9.,_@%&?+=\~\/-]*)?(?:#[^ \'\"&<>]*)?$/i;
  var regex = new RegExp (template);
  return (regex.test(url) ? 1 : 0);
 }
</script>

Если Вы хотите разрешить как корректные и новые кириллические URL-адреса, такие как чего-то.рф, выражение для проверки URL можно немного изменить, написав вместо выражения a-z0-9_- выражение a-zа-я0-9_- (если работаете в кодировке Windows-1251; обратите внимание, что замену придётся сделать дважды), а в списке доменов разрешить домен .рф: вместо inc|name в выражении будет строка inc|name|рф

Теперь перейдем к основному вопросу - скрытию средствами JavaScript своего ящика от спамеров. Простейшее решение этой задачи - написать вместо адреса что-то вроде pers[AT]mail.ru, но нам хотелось бы, чтоб по ссылке можно было щелкнуть. Известно немало способов реализовать на JavaScript базовые алгоритмы шифрования -

- однако, порождаемый ими код довольно сложен и требует отдельной генерации паролей и ключей, хранить или передавать которые мы не собираемся.

Вместо этого мы сгенерируем цифровой код функцией вида

 function Generate (mail) {
  var =;
  if (mail=="") {
   window.alert ("Адрес E-mail пуст!");
   return;
  }
  if (!validEmail(mail)) {
   window.alert ("Адрес E-mail невалиден!");
   return;
  }
  var result="",c;
  for (var k=0; k<mail.length; k++) {
   c=mail.charCodeAt(k);
   if (c<10) c="00"+c;
   else if (c<100) c="0"+c;
   result = c + result;
  }
  document.genform.result.value=result;
 }

которая вернет строку result, состоящую из цифр. Здесь предполагается, что адрес передан параметром mail, а результат записан в текстовое поле с именем result, относящееся к форме genform.

Написав простую обратную функцию со строковым параметром s

 function GetEmail (s) {
  var code="";
  for (var k=0; k<s.length; k+=3) {
   code = String.fromCharCode(s.substring(k,k+3)) + code;
  }
  window.open("mailto:" + code);
 }

мы сможем получить из "зашифрованной" строки s исходный E-mail code, как в этой ссылке для моего ящика pers@mail.ru:
Отправить почту (адреса нет ни в коде страницы, ни в статусной строке браузера)

Для генерации "кодов" удобнее вынести все нужные функции в отдельный файл:
genmailcode.js (genmailcode.js, 2 Кб)
и подключить его тегом вида

<script type="text/javascript" src="genmailcode.js"></script>

к форме вроде следующей:

<form name=genform>
 <p>Адрес E-mail: <input type=text name=mail size=30 maxlength=30></p>
 <p>Код: <input type=text name=result size=60 maxlength=180></p>
 <p><input type=button value="Закодировать E-mail" onClick="javascript:Generate(trim(document.genform.mail.value))">
 <input type=button value="Раскодировать E-mail" onClick="javascript:Email(document.genform.result.value)">
 </p>
</form>

Теперь, имея в укромном месте такой скриптик, можно включать в нужные документы ссылку на скрипт
getemail.js (getemail.js, 1 Кб),
содержащий одноименную функцию.

Посмотреть все вместе в работе можно в формах ниже.

Для тех немногих в наше время пользователей, которые отключают JavaScript или имеют не поддерживающий его браузер, может пригодиться тег noscript, добавленный после скрипта. Чтобы хитрый робот не достал E-mail оттуда, его следует "замаскировать" дополнительными тегами, в простейшем случае так:

Мой адрес: pers@mail.ru
- скопируйте и вставьте этот адрес -

<script type="text/javascript" src="getemail.js"></script>
<noscript>
<center>Мой адрес: pers<code>@</code>mail.ru<br>
<small>- скопируйте и вставьте этот адрес -</small></center>
</noscript>
<br><a href="javascript:GetEmail('117114046108105097109064115114101112')">Отправить почту</a>

Наконец, Javascript-защиту можно вообще сделать "по старинке", просто разбив адрес на части и затем программно собрав:

<script type="text/javascript">
 user = 'pers';
 site = 'mail.ru';
 document.write ('<a href=\"mailto:' + user + '@' + site + '\">' +
  user + '@' + site + '</a>');
</script>

Получится обычная с виду ссылка: , но типовой парсер, ищущий в теле документа адреса почты, вряд ли уже её "увидит".

Часть 2, дописана позднее (Ещё немного о защите адресов E-mail от ботов)

В первой части я давал лишь свои собственные рекомендации, а методов защиты адреса E-mail можно придумать намного больше, чем там описано.

Перечислим основные из них, приводя везде в пример мой адрес ur.liam@srep (кстати, именно эта строка с адресом тоже защищена, в HTML-исходнике страницы её нету)

Яваскрипт: что-то вроде такого -

<script type="text/javascript">
<!--
 var email = "pers";
 var emailHost = "mail.ru";
 var title = email + "@" + emailHost;
 document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + 
  title + "</a>");
//-->
</script>

или как в статье по ссылке выше.

Недостаток - ничего не выведется, если Javascript отключён (менее 1% пользователей, но всё же...)

Можно перегнать всё в Юникод... как Вам такая ссылочка?

<a href="mailto:&#112;&#101;&#114;&#115;&#064;&#109;&#097;&#105;&#108;&#046;&#114;&#117;">
&#112;&#101;&#114;&#115;&#064;&#109;&#097;&#105;&#108;&#046;&#114;&#117;</a>

Недостаток - современные боты уже умеют читать Юникод, а вот некоторые устаревшие браузеры - ещё нет.

Ещё проще перегнать в Юникод только "собаку", порой и этого достаточно.

<a href="mailto:pers&#064;mail.ru">pers&#064;mail.ru</a>

Понятно, что риск "обнаружения" ящика ботом в этом случае возрастает.

А может, просто добавить скрытый текст где-нибудь перед собакой?

pers<span style="display: none">635</span>@mail.ru

Простенько, мало обнаруживаемо ботом, но, увы, без ссылки, адрес почты выведется только текстом.

Если Вас устраивает адрес "только текстом", можно обойтись в коде и комментариями HTML:

pers<!-- >@. -->@<!-- >@. -->mail.ru

А зачем перегонять обязательно в Юникод, можно ведь и просто в 16-ричные числа?

<a href="mailto:%70%65%72%73%40%6d%61%69%6c%2e%72%75">
мой E-mail</a>

Недостаток - я лично был не рад видеть все эти %40 и %2E в статусной строке браузера.

Технология CSS тоже может кое-что дать для защиты "мыла" от жадных и вороватых спам-ботов:

<style>span.obfemail:after { content: "pers@mail.ru"; }</style>
<span class="obfemail">: </span>

Увы, это тоже "только текст", и не факт, что будет работать в Internet Explorer (верней, точно не будет).

Ещё один вариант CSS-защиты:

<style>span.codedirection { unicode-bidi:bidi-override; direction: rtl; }</style>
<span class="codedirection">ur.liam@srep</span>

А вот это уже кроссбраузерно, у меня в IE8, по крайней мере, сработало.

Ну хорошо, скажете Вы, а как мне всё это применить для своего "мыла" или быстро получить для него нужный код?

Есть и такой вариант, вот ссылка:

http://www.tools4noobs.com/online_tools/obfuscate_email/

Ну а если знаете или придумали ещё какой способ - пишите :)

гостевая; E-mail