emojify.js

A Javascript module to convert emoji keywords to images.

emojify.js

Master	Develop

A swiss-army-knife for all emoji, in Javascript. Used by Gitter and Mapbox.

The emoji keywords are as described by emoji-cheat-sheet.com.

Go to this project's GitHub pages to see the code in action.

Features

Fast
Awesome
Converts emoticons like :) :( :'(
Allows customisation of processed emoji
Multiple modes; img, sprites and data-URI
Available on a CDN (gasp)
Includes a sample .htaccess file for caching Javascript and CSS
Switchable emoji sets (SOON!)
Made from unicorn blood

Installation

Care about old browsers compatibility? Use https://github.com/es-shims/es5-shim

Via cdnjs

emojify.js is now available on cdnjs - https://cdnjs.com/libraries/emojify.js

Add this to the rest of your stylesheet imports:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.0.1/emojify.min.css" />

Then add this to your Javascript code:

<script src="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.0.1/emojify.min.js"></script>

Via Bower

bower install emojify.js --save

Via npm

npm install emojify.js --save

API

setConfig([object])

This works in the browser and on Node

Parameters

object - Optional JSON object with any of the following attributes:

Option	Default	Description
`blacklist.elements`	`['script', 'textarea', 'a', 'pre', 'code']`	An array of elements you don't want emojified
`blacklist.classes`	`['no-emojify']`	An array of classes you don't want emojified
`mode`	`img`	By default, emojify will output an `img` with a `src` attribute for each emoji found. But if `mode` is set to `sprite` or `data-uri`, then `span`s with classes are outputted. Don't forget to include the appropriate CSS for your choice though, see the `/dist` directory.
`tag_type`	`null`	When set, emojify uses this element with the class `emoji emoji-#{emojiname}` instead of an `img` with a `src` attribute. Example valid values: `div`, `span`. This takes precedence over the `mode` option. Note: if you're not using `img`s, `.emoji-+1` isn't a valid class, so `.emoji-plus1` is used instead.
`only_crawl_id`	`null`	[DEPRECATED] Restricts searching for emojis to a specified element & it's children. If null, and no object is passed to `run()`, `document.body` is used
`img_dir`	`'images/emoji'`	Defines the path to the emoji images
`ignore_emoticons`	`false`	If `true`, only convert emoji like `:smile:` and ignore emoticons like `:)`

Usage

emojify.setConfig({tag_type : 'div'});

run([element], [replacer])

This works in the browser and Node

Parameters

element - Optional HTML element to restrict the emojification to.
replacer - Optional Function to override emoji replacement behaviour with your own. The function will receive two arguments, the emoji pattern found (emoji), and the emoji name (name). In the case of emoticons, for example, emoji = ':)' and name = 'smile'. Your function must return a HTMLElement.

Browser

emojify.run();
// OR 
emojify.run(document.getElementById('my-element'))
// OR 
emojify.run(null, function(emoji, emojiName){
  var span = document.createElement('span');
  span.className = 'emoji emoji-'  + emojiName;
  span.innerHTML = emoji + ' replaced';
  return span;
});

Node.js

Requires you to have jsdom installed: npm i jsdom --save

var jsdom = require('jsdom')
 
jsdom.env({
    html: "<p><code>jhhh</code><em>:)</em></p>",
    done: function(errors, window) {
        emojify.run(window.document.body)
    }
});

replace(string, [callback])

This works in the browser and on Node

Parameters

string - String to emojify
callback - Optional callback function to output emoji with

Usage

By default, emojify.js uses the internal function defaultReplacer() to replace emoji. You can override this behaviour by supplying your own callback function.

Your callback function will receive two arguments, the emoji pattern found (emoji), and the emoji name (name). In the case of emoticons, for example, emoji = ':)' and name = 'smile'.

The context in which your replacer function is run will have the config available. So you can access properties such as img_dir at this.config.img_dir.

emojify.replace('I am happy :)');
// OR 
replacer = function(emoji, name) {
    // Customise output here 
    return emojifiedString;
}
 
emojify.replace('I am happy :)', replacer);