- ×
A Javascript module to convert Emoji keywords to images
Filed under miscellaneousShow Allemojify.js
This project is currently unmaintained.
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.1.0/css/basic/emojify.min.css" />
Then add this to your Javascript code:
<script src="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/js/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 asrc
attribute for each emoji found. But ifmode
is set tosprite
ordata-uri
, thenspan
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 animg
with asrc
attribute. Example valid values:div
,span
. This takes precedence over themode
option. Note: if you're not usingimg
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 usedimg_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 = ':)'
andname = '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 emojifycallback
- 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 = ':)'
andname = 'smile'
.The context in which your replacer function is run will have the config available. So you can access properties such as
img_dir
atthis.config.img_dir
.emojify.replace('I am happy :)'); // OR replacer = function(emoji, name) { // Customise output here return emojifiedString; } emojify.replace('I am happy :)', replacer);
Contributing changes
Please read CONTRIBUTING.md.
Credits
License
Please read LICENSE.md. For image attributions, please read LICENSE-IMAGES.md