SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Location
    Chennai, India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Hiding Email from Spam Bots using Unobtrusive Javascript

    I've made a code that will render a click able email link unobtrusively. This code ensures that even if JavaScript is disabled the email will be readable and accessible.

    All you gotta do is to include this code in the head of your document or include in a separate .js file.

    Code JavaScript:
    function safeMail() {
    	var rAt = new RegExp("(( ?)\\[at\\]( ?))", "i");
    	var rDot = new RegExp("(( ?)\\[dot\\]( ?))", "i");
    	var as=document.getElementsByTagName('span');
    	for(var i=0;i<as.length;i++) {
    		cls = as[i].className;
    		clsnme = cls.toString().indexOf('safemail');
    		if(cls && clsnme !=-1){
    			var mailid = as[i].innerHTML;
    			var pri = mailid.replace(rAt,"\@");
    			var sec = pri.replace(rDot,"\.");
    			maLink = "<a href='mailto:"+sec+"'>"+sec+"</a>";
    			as[i].innerHTML = maLink;
    		}
    	}
    }
    window.onload =safeMail;

    in the content you need to declare the email address in the following format

    Code HTML4Strict:
    <span class="safeMail">
    	 yourname [at] gmail [dot] com
    </span>

    you can find a working demo here http://blog.delivi.info/examples/safeMail/

    I want you guys to test this and give me any suggestions and bugs in it. This greatly help me brush up my JavaScript skills.

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it was me, I'd do it slightly different. For example, the tasks of finding which nodes to replace and doing the replacement should be 2 separate tasks. That way, developers can use their own methods for finding the elements (whether it's by getting elements by a classname, or getting particular elements by id).
    Also, I'd put this into its own namespace.
    Also, the RegExp's can be greatly simplified.
    And finally, you were allocating a bunch of new variables when you didn't really need to. Below is my re-worked example.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset:utf-8">
      <title></title>
    </head>
    <body>
    <ul>
    <li><span id="contactEmail">contact [at] example [dot] com</span></li>
    <li><span id="infoEmail">info [at] example [dot] com</span></li>
    <li><span id="supportEmail">support [at] example [dot] com</span></li>
    </ul>
    <script type="text/javascript">
    // Look for the SAFEMAIL namespace object and create it if it doesn't exist
    if ((typeof SAFEMAIL == "undefined") || (null == SAFEMAIL)) {
        var SAFEMAIL = (function() {
            var rAt = /\[at\]/gi;
            var rDot = /\[dot\]/gi;
            return {
                /**
                 * Replace the contents of an element node and turn it into a link
                 * @param {HTMLElement} el The element node containing the email address
                 */
                linkify : function(el) {
                    var addr = el.innerHTML;
                    addr = addr.replace(/\s/g, ""); // Strip all whitespace
                    addr = addr.replace(rAt, "\@");
                    addr = addr.replace(rDot, ".");
                    addr = "<a href='mailto:" + addr + "'>" + addr + "</a>";
                    el.innerHTML = addr;
                }
            };
        })();
    }
    window.onload = function() {
        var i;
        // 1. Get the items to replace
        var emails = [];
        emails[emails.length] = document.getElementById('contactEmail');
        emails[emails.length] = document.getElementById('infoEmail');
        emails[emails.length] = document.getElementById('supportEmail');
     
        // 2. Do the replacement
        for (i = 0; i < emails.length; i++) {
            SAFEMAIL.linkify(emails[i]);
        }
    };
    </script>
    </body>
    </html>
    And specifically, here's the JavaScript portion:
    Code JavaScript:
    // Look for the SAFEMAIL namespace object and create it if it doesn't exist
    if ((typeof SAFEMAIL == "undefined") || (null == SAFEMAIL)) {
        var SAFEMAIL = (function() {
            var rAt = /\[at\]/gi;
            var rDot = /\[dot\]/gi;
            return {
                /**
                 * Replace the contents of an element node and turn it into a link
                 * @param {HTMLElement} el The element node containing the email address
                 */
                linkify : function(el) {
                    var addr = el.innerHTML;
                    addr = addr.replace(/\s/g, ""); // Strip all whitespace
                    addr = addr.replace(rAt, "\@");
                    addr = addr.replace(rDot, ".");
                    addr = "<a href='mailto:" + addr + "'>" + addr + "</a>";
                    el.innerHTML = addr;
                }
            };
        })();
    }
    window.onload = function() {
        var i;
        // 1. Get the items to replace
        var emails = [];
        emails[emails.length] = document.getElementById('contactEmail');
        emails[emails.length] = document.getElementById('infoEmail');
        emails[emails.length] = document.getElementById('supportEmail');
     
        // 2. Do the replacement
        for (i = 0; i < emails.length; i++) {
            SAFEMAIL.linkify(emails[i]);
        }
    };

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    delivi, the main problem with your script, I think, is the overuse of global variables. You only need one (the function).

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Location
    Chennai, India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys for the suggestions and the improvements. I'll improve my coding skills


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •