Facebook chat letters

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</textarea>
</div>
<div class="to">
        <label>Use this:</label>
	<textarea></textarea>
</div>
<div class="preview">
  <label>Preview:</label>
  <div></div>
</div>

<style>
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; }
.from textarea { background: #fafafa; }
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 { 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]]'
};

$(".from textarea").live("keyup", function update() {
  var str = $(this).val().toUpperCase();
  str = str.replace(/[A-Z]/g, function(letter) {
    return Letters[letter] + ' ';
  });
  
  var str2 = str.replace(/\[\[(.*?)\]\]/g, function(_, id) {
    return "<img src='https://graph.facebook.com/"+id+"/picture' />";
  });

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

$(function() {
  $(".from textarea").trigger('keyup');
});
</script>

Hi how are you