メールアドレスを1ドットタグで書くソリューション

gistfile1.js

function _dotmail_(mail_addr, elm_id, bgcolor, color) {
  var str_list={
    a:[[1,3],[2,3],[3,4],[3,5],[3,6],[2,6],[1,5]],
    b:[[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[2,3],[3,3],[4,4],[4,5],[3,6],[2,6]],
    c:[[3,3],[2,3],[1,4],[1,5],[2,6],[3,6]],
    d:[[3,3],[2,3],[1,4],[1,5],[2,6],[3,6],[4,6],[4,5],[4,4],[4,3],[4,2],[4,1]],
    e:[[1,5],[1,6],[2,7],[3,7],[2,4],[3,5]],
    f:[[2,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[2,3],],
    g:[[1,4],[1,5],[2,6],[3,6],[2,3],[3,3],[4,3],[4,4],[4,5],[4,6],[4,7],[3,8],[2,8]],
    h:[[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[2,4],[3,5],[3,6]],
    i:[[1,1],[1,3],[1,4],[1,5],[1,6]],
    j:[[2,1],[2,3],[2,4],[2,5],[2,6],[2,7],[1,8]],
    k:[[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[3,3],[2,4],[3,5],[3,6]],
    l:[[1,1],[1,2],[1,3],[1,4],[1,5],[1,6]],
    m:[[1,4],[1,5],[1,6],[2,4],[3,4],[3,5],[3,6],[4,4],[5,5],[5,6]],
    n:[[1,4],[1,5],[1,6],[2,4],[3,4],[3,5],[3,6]],
    o:[[1,4],[1,5],[2,6],[3,6],[4,5],[4,4],[3,3],[2,3]],
    p:[[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[2,3],[3,3],[4,4],[4,5],[3,6],[2,6]],
    q:[[1,4],[1,5],[2,6],[3,6],[2,3],[3,3],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8]],
    r:[[1,3],[1,4],[1,5],[1,6],[2,3]],
    s:[[3,3],[2,3],[1,4],[3,5],[2,6],[1,6]],
    t:[[1,2],[1,3],[1,4],[1,5],[2,6],[2,3]],
    u:[[1,3],[1,4],[1,5],[2,6],[3,6],[3,5],[3,4],[3,3]],
    v:[[1,3],[1,4],[2,5],[2,6],[3,3],[3,4]],
    w:[[1,3],[1,4],[2,5],[2,6],[3,3],[3,4],[4,5],[4,6],[5,3],[5,4]],
    x:[[1,3],[2,4],[2,5],[1,6],[3,3],[3,6]],
    y:[[1,3],[1,4],[1,5],[2,6],[2,7],[1,8],[3,3],[3,4],[3,5]],
    z:[[1,3],[2,3],[3,3],[3,4],[1,5],[1,6],[2,6],[3,6]],
    0:[[1,2],[1,3],[1,4],[1,5],[2,6],[3,6],[2,1],[3,1],[4,2],[4,3],[4,4],[4,5]],
    1:[[1,2],[2,1],[2,2],[2,3],[2,4],[2,5],[2,6]],
    2:[[1,2],[2,1],[3,1],[4,2],[4,3],[3,4],[2,4],[1,5],[1,6],[2,6],[3,6],[4,6]],
    3:[[1,2],[2,1],[3,1],[4,2],[3,3],[4,4],[4,5],[3,6],[2,6],[1,5]],
    4:[[3,1],[2,2],[2,3],[1,4],[1,5],[2,5],[3,5],[4,5],[3,2],[3,3],[3,4],[3,5],[3,6]],
    5:[[1,1],[2,1],[3,1],[1,2],[1,3],[2,3],[3,4],[3,5],[2,6],[1,6]],
    6:[[3,1],[2,1],[1,2],[1,3],[1,4],[1,5],[2,6],[3,6],[4,5],[4,4],[3,3],[2,3]],
    7:[[1,1],[2,1],[3,1],[3,2],[2,3],[2,4],[2,5],[2,6]],
    8:[[2,1],[3,1],[1,2],[4,2],[2,3],[3,3],[1,4],[1,5],[2,6],[3,6],[4,5],[4,4]],
    9:[[1,2],[2,1],[3,1],[4,2],[4,3],[4,4],[4,5],[3,6],[2,6],[1,5],[2,3],[3,3]],
    at:[[5,1],[4,1],[3,1],[2,2],[1,3],[1,4],[1,5],[2,6],[3,7],[4,7],[5,7],[6,2],[7,3],[7,4],[6,5],[5,5],[4,5],[3,4],[4,3],[5,4]],
    hyphen:[[1,4],[2,4]],
    dot:[[1,6]],
    _:[[1,7],[2,7],[3,7],[4,7]]
  };
  
  function ce(t){return document.createElement(t);}
  
  var _bg=(bgcolor)?bgcolor:'#FFF';
  var _cl=(color)?color:'#000';
  var list=mail_addr.split('');
  
  var div=ce('div');
  div.style.position='relative';
  div.style.width='200px';
  div.style.height='10px';
  div.style.background=_bg;
  div.style.fontSize='1px';
  
  for(var i=0,l=list.length; i<l; ++i){
    var s=list[i],s=(s=='@')?'at':(s=='-')?'hyphen':(s=='.')?'dot':s;
    if(!(s in str_list)){continue;}
    for(var j=0,m=str_list[s].length; j<m; ++j){
      var d=ce('span');
      d.style.position='absolute';
      d.style.backgroundColor=_cl;
      d.style.width=d.style.height='1px';
      d.style.left=str_list[s][j][0]+(i*6)+'px';
      d.style.top=str_list[s][j][1]+'px';
      div.appendChild(d);
    }
  }
  document.getElementById(elm_id).appendChild(div);
}