Skip to content

Facebook Chat’s Bold and Underline Text and Prodding Facebook Chat on a mission

September 8, 2009

I never noticed this before, but by placing asterisks around a word in Facebook Chat will bold the word, and placing underscores around one will underline the word. My first instinct was to figure out how to type italic text. Well a few Google searches showed that other people were looking for it as well; so I decided to go “straight to the horse’s mouth,” so to speak.

Figured the first place to start the search was in the messages that relay chat and see if the HTML conversion takes place there. Now mind you I’ve already poked and prodded Facebook Chat’s message relay server before. Its a MochiWeb server, which you can see in the HTTP headers for chat packets. For more background specifics on the setup that is Facebook chat, see Facebook’s engineering blog.

Server: MochiWeb/1.0 (I'm not even supposed to be here today.)

Anyhow, by reading the HTTP packet flow, I can get the “raw” information that the webpage uses to talk to the server. These I believe are in JSON although don’t quote me on that, suffice to say I can at least read enough of the raw information they contain to see the message I just received. And sure enough these contain the text just as they would have been typed, that is, asterisks instead of HTML bold tags and underscores instead of HTML underline tags.

So, then this tells me that the replacement of “Facebook Chat style markup” takes place in the user’s web browser. Problem is, there’s a bunch of JavaScript files attached to any Facebook page. Fortunately for me though with Firefox with the FireBug extension the process of analyzing a web page’s code is fairly streamlined.

Going straight to the code generated for a chat window, I noticed that the “pic_padding” class is on each message’s node (which happen to be paragraph elements). So I searched for this class in the JavaScript given that is was the best lead I had. Fortunately this lead turned out results.

if(pendingMsgID||errorMarkup){
var pendingElementID=pendingMsgID?' id="pending_'+this.id+'_'+pendingMsgID+'"':'';markup+='
<div class="pic_padding">'+
299(errorMarkup?errorMarkup:'')+'</div>
';}

And just a couple lines below that, ta-da!

_processStyledText:function(textProcessor,str){return textProcessor(str).replace(/\b_([^_\*]+)_\b/g,'<u>$1</u>').replace(/(\s|^)\*([^_\*]+)\*(?=$|\s)/g,'$1<b>$2</b>');}

Yep, regular expressions. Just what I was expecting. No sign of a regex that replaces something with <i>..</i>. That’s right, there is no way to type in italics.

So Facebook, why no italics?

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: