Skip to content

Instantly share code, notes, and snippets.

@rstacruz
Created December 24, 2011 17:54
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rstacruz/1517933 to your computer and use it in GitHub Desktop.
Facebook chat letters
<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>
@vhish
Copy link

vhish commented Apr 14, 2012

Can you please explain line 63 to me? I don't understand two things: first, the '(.*?)' in the square brackets that you escaped and the arguments passed to the function(_, id), particularly the underscore what does it do and why does the function have two arguments. Thanks.

P.S. Can the (letter) argument passed to the function on line 58 be replaced by any other variable? I'm wondering if it is a predefined keyword thanks.

@jeturgavli
Copy link

nice... yar..

@farazalichanna
Copy link

Hi how are you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment