Email Address Hiding - JavaScripts

JavaScripts
Email Address Hiding

Grizzly WebMaster (HOME) >> JavaScripts >> Email Address Hiding

The problem that we are solving is that many spam generating systems use spiders that collect information from websites. Specifically, they collect the email addresses that you put in your web pages. There are several different solutions out there but many are a real pain requiring you to encode your email address into arrays of decimal characters or other similar schemes. The biggest problems with these is that they are a real pain for doing real work on your website on a daily basis. These solutions are a little more direct and easy to maintain.

Embedded Javascript

This script demonstrates a simple method requiring entry of a JavaScript block at each location where you want to have an email address.

See this script in action.


<html>

<head>
<title>Email Address Hide Example</title>
<script type="text/javascript" language="JavaScript">
<!--
var g_i = 0;
function mgen( sName, sText )
{
    document.write('<span id="mm' + sName + '">---</span>');
    setTimeout('fixm( "'+sName+'", "'+sText+'" )', 0.05*1000*(g_i+1) );
    ++g_i;
}

var g_at = '&#64;';
var g_sDom = 'Your' + 'Domain' + 'Name' + '&#46;' + 'com';

function fixm( sName, sText )
{
    var sA;
    var aa;
    var i;
    if ( sName.indexOf( "|" ) )
    {
        aa = sName.split( "|" );
        sA = aa[0];
        for ( i = 1; i < aa.length; i++ )
            sA += g_at + aa[i];
    }
    else
    {
        sA = sName + g_at + g_sDom;
    }
    if ( 0 < sA.indexOf( " " ) )
    {
        aa = sA.split( " " );
        sA = aa[0];
        for ( i = 1; i < aa.length; ++i )
            sA += "&#46" + aa[i];
    }
    var sT;
    if ( 0 < sText.length )
        sT = sText;
    else
        sT = sA;
    var sMLink;
    sMLink = '<a h' + 're' + 'f="' + 'mai' + 'lto&#58;' + sA + '">' + sT + '</' + 'a>';
    var sID = 'mm' + sName;
    if ( document.layers )
    {
        var oInnerDoc = document.layers[sID].document;
        if ( oInnerDoc )
        {
            oInnerDoc.write( sMLink );
            oInnerDoc.close();
        }
    }
    else if ( document.getElementById )
    {
        var oSpan;
        oSpan = document.getElementById( sID );
        if ( oSpan )
            oSpan.innerHTML = sMLink;
    }
    else if ( document.all )
    {
        var oSpan = document.all[sID];
        if ( oSpan )
            oSpan.innerHTML = sMLink;
    }

}

//-->
</script>
</head>

<body>

<p>For more details please send email to
<script type="text/javascript" language="JavaScript">mgen('George','Curious George')</script>
<noscript>(email address protected by Javascript)</noscript>.
</p>

<p>Another sample
<script type="text/javascript" language="JavaScript">mgen('George|SomeOtherDomain com','')</script>
<noscript>(email address protected by Javascript)</noscript>.
</p>


</body>

</html>

Span Substitute

This method takes a slightly different approach. In some ways it might look more complex, but in the daily site maintenance work it is actually much easier to deal with. The real nice thing is that ALL of the JavaScript can be hidden in an external file and then referenced.

See this script in action.


<html>

<head>
<title>Email Address Hide Example</title>
<script type="text/javascript" language="JavaScript">
<!--

var g_at = '&#64;';
var g_sDom = 'Your' + 'Domain' + 'Name' + '&#46;' + 'com';


function postoffice()
{
    var aSpans = document.getElementsByTagName( "SPAN" );
    var i;
    var j;
    var oSpan;
    var sContent;
    var sLink;
    for ( i = 0; i < aSpans.length; ++i )
    {
        oSpan = aSpans[i];
        if ( oSpan.className == "pobox" )
        {
            sContent = oSpan.innerText;
            j = sContent.indexOf( "[" );
            if ( 0 < j )
                sLink = poWithMessage( sContent );
            else
                sLink = poPlainAddress( sContent );
            if ( 0 < sLink.length )
            {
                oSpan.innerHTML = sLink;
                oSpan.className = "poboxsent";
            }
        }
    }
}


function poWithMessage( sContent )
{
    var i;
    i = sContent.indexOf( "[" );
    var sM;
    var sA;
    
    sM = sContent.substr(0,i);
    sM = poTrim( sM );
    sA = sContent.substr(i+1);
    i = sA.indexOf( "]" );
    if ( 0 < i )
        sA = sA.substr(0, i);
    sA = poParseAddress( sA );
    if ( 0 < sM.length )
        return poBuildLink( sA, sM );
    else
        return poBuildLink( sA, sA );
}

function telWithMessage( sContent )
{
    var i;
    i = sContent.indexOf( "[" );
    var sM;
    var sA;
    
    sM = sContent.substr(0,i);
    sM = poTrim( sM );
    sA = sContent.substr(i+1);
    i = sA.indexOf( "]" );
    if ( 0 < i )
        sA = sA.substr(0, i);
    sA = telParseNumber( sA );
    if ( 0 < sM.length )
        return telBuildLink( sA, sM );
    else
        return telBuildLink( sA, sA );
}

function poPlainAddress( sContent )
{
    var sA = poParseAddress( sContent );
    if ( 0 < sA.length )
        return poBuildLink( sA, sA );
    else
        return "";
}

function telPlainNumber( sContent )
{
    var sA = telParseNumber( sContent );
    if ( 0 < sA.length )
        return telBuildLink( sA, sA );
    else
        return "";
}


function poLTrim( str )
{
    for( var k = 0; k < str.length && poIsWhitespace( str.charAt(k) ); k++)
        ;
    return str.substring(k, str.length);
}

function poRTrim( str )
{
    for( var j=str.length-1; 0 <= j && poIsWhitespace(str.charAt(j)) ; j--)
        ;
    return str.substring(0, j+1);
}

function poTrim( str )
{
    return poLTrim( poRTrim( str ));
}

var k_whitespaceChars = " \t\n\r\f";

function poIsWhitespace(charToCheck)
{
    return (k_whitespaceChars.indexOf(charToCheck) != -1);
}


function poBuildLink( sA, sT )
{
    return '<a h' + 're' + 'f="' + 'mai' + 'lto&#58;' + sA + '">' + sT + '</' + 'a>';
}

function telBuildLink( sA, sT )
{
    return '<a h' + 're' + 'f="' + 't' + 'el&#58;+1-' + sA + '">' + sT + '</' + 'a>';
}


function poParseAddress( sAddress )
{
    var sA;
    var sQ;
    var aa;
    var i;
    
    // trim white space
    sA = poTrim( sAddress );
    
    // anything to the right of the v-bar will be the subject of the mail
    i = sA.indexOf( "|" );
    if ( 0 < i )
    {
        // no processing will be done on this
        sQ = sA.substr(i+1);
        sA = sA.substr(0,i);
        sA = poTrim( sA );
        sQ = poTrim( sQ );
    }
    else
    {
        sQ = "";
    }
    
    // the asterix is used to "hide" the at-sign
    if ( 0 < sA.indexOf( "*" ) )
    {
        aa = sA.split( "*" );
        sA = aa[0].toString();
        for ( i = 1; i < aa.length; i++ )
            sA += g_at + aa[i].toString();
    }
    else
    {
        sA = sA + g_at + g_sDom;
    }
    
    // colons are used to "hide" periods
    if ( 0 < sA.indexOf( ":" ) )
    {
        aa = sA.split( ":" );
        sA = aa[0].toString();
        for ( i = 1; i < aa.length; ++i )
            sA += "&#46;" + aa[i].toString();
    }
    
    // spaces are used to confuse things; just collapse out
    if ( 0 < sA.indexOf( " " ) )
    {
        aa = sA.split( " " );
        sA = aa[0].toString();
        for ( i = 1; i < aa.length; ++i )
        {
            if ( 0 < aa[i].length )
                sA += aa[i].toString();
        }
    }
    
    if ( 0 < sQ.length )
    {
        // add in the subject if one was specified
        sA = sA + "?Subject=" + escape(sQ);
    }
    
    return sA;
}



//-->
</script>
</head>

<body onload="postoffice();">

<p>For more details please send email to <span class="pobox">Curious George [George]</span>
</p>

<p>Another sample <span class="pobox">George*Some Other Domain:com</span>
</p>


</body>

</html>


Service Provided by Bear Consulting Group	Last modified: 07 Aug 2008 Copyright 2001 Bear Consulting Group