patternjavascriptMinor
Replacing emoticon characters with emoji icons
Viewed 0 times
iconswithemoticonreplacingemojicharacters
Problem
Basically, the code looks for certain emoticon characters (like
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
:) 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.
-
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.