Facebook chat letters with Emoticons

index.html

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<div class="from">
	<label>Type here:</label>
	<textarea>Hello :trollface:</textarea>
</div>
<div class="to">
        <label>Use this:</label>
	<textarea></textarea>
</div>
<div class="preview">
  <label>Preview:</label>
  <div></div>
</div>

<div class="reference">
  <label>Reference (Mouse wheel to scroll)</label>
  <div></div>
</div>

<style>
div.from, div.to, div.preview { width: 70%; }
div.reference { position: absolute; width: 25%; top: 0px; left: 75%; height: 450px; overflow-y: scroll;  }
textarea, .preview div { margin: 0; width: 100%; padding: 10px; background: #eee; border: solid 1px #ddd; border-radius: 4px; height: 100px; color: #333; text-shadow: 1px 1px 0 #fff; overflow: auto; }
.from textarea { background: #fafafa; }
.reference { float: right; }
textarea:focus { outline: 0; border: solid 1px #aaa; }
div { margin: 10px; }
textarea, label { font-size: 10pt; font-family: sans-serif; }
label { padding: 5px 0; display: block; }
body { color: #999; }
.preview img, .reference img { width: 16px; height: 16px; background: #fff; display: inline-block; }
</style>

<script>
var Letters = {
  A: '[[399197913893]]',
  B: '[[115345298505025]]',
  C: '[[53872404042]]',
  D: '[[226910642728]]',
  E: '[[140775945956538]]',
  F: '[[136046106447549]]',
  G: '[[119431374760220]]',
  H: '[[205082339544090]]',
  I: '[[432883640525]]',
  J: '[[228315337208110]]',
  K: '[[56926372437]]',
  L: '[[221310038416]]',
  M: '[[161672657237726]]',
  N: '[[203933512990765]]',
  O: '[[116564658357124]]',
  P: '[[64245738440]]',
  Q: '[[196390043757013]]',
  R: '[[111884958838844]]',
  S: '[[136198113087158]]',
  T: '[[142464449131926]]',
  U: '[[172843133886]]',
  V: '[[77189649729]]',
  W: '[[116928513730]]',
  X: '[[108075899233912]]',
  Y: '[[140715832616884]]',
  Z: '[[165724910215]]'
};

var Emoticons = {
  areyoufuckingkiddingme: '[[143220739082110]]',
  beast: '[[293955833972970]] [[293955850639635]] [[293955873972966]] [[293955920639628]] [[293956017306285]]<br />[[293956043972949]] [[293956060639614]] [[293956087306278]] [[293956100639610]] [[293956107306276]]<br />[[293956117306275]] [[293956127306274]] [[293956147306272]] [[293956220639598]] [[293956283972925]]<br />[[293956303972923]] [[293956327306254]] [[293956350639585]] [[293956370639583]] [[293956450639575]]<br />[[293956570639563]] [[293956620639558]] [[293956677306219]] [[293956710639549]] [[293956767306210]]',
  cerealguy: '[[170815706323196]]',
  challangaccepted: '[[100002727365206]]',
  derp: '[[224812970902314]]',
  derpina: '[[192644604154319]]',
  dumbbitch: '[[218595638164996]]',
  feellikeasir: '[[168040846586189]]',
  foreveralone: '[[177903015598419]]',
  foreveralonechristmas: '[[125038607580286]]',
  fuckyeah: '[[105387672833401]]',
  lamp: '[[100001256102462]]',
  lolface: '[[168456309878025]]',
  megusta: '[[211782832186415]]',
  megustabig: '[[293943390640881]][[293944357307451]][[293944767307410]]<br />[[293945010640719]][[293945623973991]][[293945800640640]]<br />[[293946030640617]][[293946127307274]][[293946297307257]]',
  mog: '[[142670085793927]]',
  motherofgod: '[[142670085793927]]',
  notbadobama: '[[169919399735055]]',
  no: '[[167359756658519]]',
  noguy: '[[167359756658519]]',
  notbad: '[[notbaad]]',
  okayface: '[[100002752520227]]',
  pokerface: '[[129627277060203]]',
  questionmark: '[[100002727365206]]',
  rageface: '[[FUUUOFFICIAL]]',
  sociallyawkwardpenguin: '[[98438140742]]',
  trollface: '[[171108522930776]]',
  yaoming: '[[218595638164996]]',
};

$(".from textarea").live("keyup", function update() {
  var str = replaceWordsWithTags($(this).val());

  $(".to textarea").val(brToNewline(str));
  $(".preview div").html(tagsToImgs(str));
});

function replaceWordsWithTags(str) {
  // Regex each word in the string
  return str.replace(/[:\w]+/g, function(word) {
    console.log(word);
    if(word[0] == ":" && word.slice(-1) == ":") {
      var emoticon = word.slice(1,-1).toLowerCase();
      if(emoticon && Emoticons[emoticon]) {
        return Emoticons[emoticon];
      }
    }
    else {
      return word.replace(/[A-Za-z]/g, function(letter) {
	      letter = letter.toUpperCase();
        return Letters[letter] + ' ';
      });
    }
  });
}

// Replace [[tags]] with <img>s
function tagsToImgs(str) {
  return str.replace(/\[\[(.*?)\]\]/g, function(_, id) {
    return "<img src='https://graph.facebook.com/"+id+"/picture' />";
  });
}

// Replace <br /> with \n
function brToNewline(str) {
  return str.replace(/<br\s*?\/*?>/g, "\n");
};

$(function() {
  $(".from textarea").trigger('keyup');
 
  var reference = "";
  // Create the reference string
  for(var emoticon in Emoticons) {
    // Make sure we're not grabbing something from the prototype chain.
    if(Emoticons.hasOwnProperty(emoticon)) {
      reference += tagsToImgs(Emoticons[emoticon]);
      reference += " :" + emoticon + ":<br />";
    }
  }

  $(".reference div").html(reference);
});
</script>

I like it.....<3<3<3

[[205082339544090]] [[140775945956538]] [[140715832616884]]

[[[124641767652266]]] [[[124642810985495]]] [[[124643044318805]]] [[[124643044318805]]] [[[124643487652094]]] [[[124642300985546]]] [[[124644090985367]]] [[[124644404318669]]] [[[124644567651986]]] [[[124642300985546]]] [[[124643487652094]]] [[[124644404318669]]] [[[124642810985495]]] [[[124645367651906]]] [[[124642300985546]]] [[[124645977651845]]] [[[124646247651818]]] [[[124646574318452]]] [[[124645977651845]]] [[[124642300985546]]]

You can test it here: http://pastehtml.com/view/brt4533kv.html

Boogles you could use this letters and memes: http://pastebin.com/ePJASr0i