Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@vhish 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

This comment has been minimized.

Copy link

@jeturgavli jeturgavli commented Jan 26, 2013

nice... yar..

@farazalichanna

This comment has been minimized.

Copy link

@farazalichanna farazalichanna commented Oct 11, 2016

Hi how are you

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