HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Replacing emoticon characters with emoji icons

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
iconswithemoticonreplacingemojicharacters

Problem

Basically, the code looks for certain emoticon characters (like :) or :|) and replace them with an emoji icon. It also does this for emoji keywords like (:blush: or :smirk:).

A better explanation is probably on the GitHub repo.

What areas of the code should I concentrate on improving, and if possible, how to improve them?

```
(function( global ) {
var emojify = (function() {

// Get DOM as local variable for simplicity's sake
var document = global.window.document;

return {

// This functions sets configuration options
config: function(emoticons, people, nature, objects, places, symbols) {
this.emoticons_enabled = typeof emoticons !== 'undefined' ? emoticons : true;
this.people_enabled = typeof people !== 'undefined' ? people : true;
this.nature_enabled = typeof nature !== 'undefined' ? nature : true;
this.objects_enabled = typeof objects !== 'undefined' ? objects : true;
this.places_enabled = typeof places !== 'undefined' ? places : true;
this.symbols_enabled = typeof symbols !== 'undefined' ? symbols : true;
},

// Helper function to find text within DOM
findText: function(element, pattern, callback) {
for (var childi = element.childNodes.length; childi-->0;) {
var child = element.childNodes[childi];
if (child.nodeType == 1) {

// Get tag name and class attribute
var tag = child.tagName.toLowerCase(), classname;
if(child.hasAttribute('class'))
classname = child.getAttribute('class').toLowerCase();

// Hacky at the minute, needs to be fixed
if (classname) {
if (tag !== 'script' && tag !== 'style' && tag !== 'textarea' && classname !== 'no-emojify')
this.findText(child, pattern, callback);
} else {
if (tag !== 'script' && tag !== 'style' && tag !== 'textarea')
this.findText(child, pattern, callback);
}

} else if (child.nodeType == 3) {
var matches = [];
if (typeof patter

Solution

here are few improvement area which i would suggest ,

-
Current code select all emot element of a document and apply the icon on that , it should be section based or say it should be dependent upon library user (just like jquery does).

-
child.nodeType == 1 is not a good practice better use an enum/ switch for better comparison.

-
better use jquery/underscore to make it usable. jquery extension are easy to write and maintain.

section based means I can select dom elements like all div or all paragraph having emot class and then apply your function on that , just like this

$(".emot").emotify()

this will select all element having emot class and needs to emotify.

Let me know if you have any more confusion.

Context

StackExchange Code Review Q#19927, answer score: 2

Revisions (0)

No revisions yet.