1 /*jslint indent: 2, browser: true, bitwise: true, plusplus: true */
2 var twemoji = (function (
3 /*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
4 https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
7 // WARNING: this file is generated automatically via
8 // `node twemoji-generator.js`
9 // please update its `createTwemoji` function
10 // at the bottom of the same file instead.
15 /*jshint maxparams:4 */
18 // the exported module object
22 /////////////////////////
24 /////////////////////////
26 // default assets url, by default will be Twitter Inc. CDN
27 base: 'https://twemoji.maxcdn.com/2/',
29 // default assets file extensions, by default '.png'
32 // default assets/folder size, by default "72x72"
33 // available via Twitter CDN: 72
36 // default class name, by default 'emoji'
39 // basic utilities / helpers to convert code points
40 // to JavaScript surrogates and vice versa
44 * Given an HEX codepoint, returns UTF16 surrogate pairs.
46 * @param string generic codepoint, i.e. '1F4A9'
47 * @return string codepoint transformed into utf16 surrogates pair,
51 * twemoji.convert.fromCodePoint('1f1e8');
54 * '1f1e8-1f1f3'.split('-').map(twemoji.convert.fromCodePoint).join('')
55 * // "\ud83c\udde8\ud83c\uddf3"
57 fromCodePoint: fromCodePoint,
60 * Given UTF16 surrogate pairs, returns the equivalent HEX codepoint.
62 * @param string generic utf16 surrogates pair, i.e. \uD83D\uDCA9
63 * @param string optional separator for double code points, default='-'
64 * @return string utf16 transformed into codepoint, i.e. '1F4A9'
67 * twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
70 * twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
73 toCodePoint: toCodePoint
77 /////////////////////////
79 /////////////////////////
82 * User first: used to remove missing images
83 * preserving the original text intent when
84 * a fallback for network problems is desired.
85 * Automatically added to Image nodes via DOM
86 * It could be recycled for string operations via:
87 * $('img.emoji').on('error', twemoji.onerror)
89 onerror: function onerror() {
90 if (this.parentNode) {
91 this.parentNode.replaceChild(createText(this.alt), this);
96 * Main method/logic to generate either <img> tags or HTMLImage nodes.
97 * "emojify" a generic text or DOM Element.
101 * String replacement for `innerHTML` or server side operations
102 * twemoji.parse(string);
103 * twemoji.parse(string, Function);
104 * twemoji.parse(string, Object);
106 * HTMLElement tree parsing for safer operations over existing DOM
107 * twemoji.parse(HTMLElement);
108 * twemoji.parse(HTMLElement, Function);
109 * twemoji.parse(HTMLElement, Object);
111 * @param string|HTMLElement the source to parse and enrich with emoji.
113 * string replace emoji matches with <img> tags.
114 * Mainly used to inject emoji via `innerHTML`
115 * It does **not** parse the string or validate it,
116 * it simply replaces found emoji with a tag.
117 * NOTE: be sure this won't affect security.
119 * HTMLElement walk through the DOM tree and find emoji
120 * that are inside **text node only** (nodeType === 3)
121 * Mainly used to put emoji in already generated DOM
122 * without compromising surrounding nodes and
123 * **avoiding** the usage of `innerHTML`.
124 * NOTE: Using DOM elements instead of strings should
125 * improve security without compromising too much
126 * performance compared with a less safe `innerHTML`.
128 * @param Function|Object [optional]
129 * either the callback that will be invoked or an object
130 * with all properties to use per each found emoji.
132 * Function if specified, this will be invoked per each emoji
133 * that has been found through the RegExp except
134 * those follwed by the invariant \uFE0E ("as text").
135 * Once invoked, parameters will be:
137 * iconId:string the lower case HEX code point
140 * options:Object all info for this parsing operation
142 * variant:char the optional \uFE0F ("as image")
143 * variant, in case this info
144 * is anyhow meaningful.
145 * By default this is ignored.
147 * If such callback will return a falsy value instead
148 * of a valid `src` to use for the image, nothing will
149 * actually change for that specific emoji.
152 * Object if specified, an object containing the following properties
154 * callback Function the callback to invoke per each found emoji.
155 * base string the base url, by default twemoji.base
156 * ext string the image extension, by default twemoji.ext
157 * size string the assets size, by default twemoji.size
161 * twemoji.parse("I \u2764\uFE0F emoji!");
162 * // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"> emoji!
165 * twemoji.parse("I \u2764\uFE0F emoji!", function(iconId, options) {
166 * return '/assets/' + iconId + '.gif';
168 * // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"> emoji!
171 * twemoji.parse("I \u2764\uFE0F emoji!", {
173 * callback: function(iconId, options) {
174 * return '/assets/' + options.size + '/' + iconId + options.ext;
177 * // I <img class="emoji" draggable="false" alt="❤️" src="/assets/72x72/2764.png"> emoji!
183 * Given a string, invokes the callback argument
184 * per each emoji found in such string.
185 * This is the most raw version used by
186 * the .parse(string) method itself.
188 * @param string generic string to parse
189 * @param Function a generic callback that will be
190 * invoked to replace the content.
191 * This calback wil receive standard
192 * String.prototype.replace(str, callback)
195 * rawText, // the emoji match
198 * and others commonly received via replace.
203 * Simplify string tests against emoji.
205 * @param string some text that might contain emoji
206 * @return boolean true if any emoji was found, false otherwise.
210 * if (twemoji.test(someContent)) {
211 * console.log("emoji All The Things!");
217 // used to escape HTML special chars in attributes
226 // RegExp based on emoji's official Unicode standards
227 // http://www.unicode.org/Public/UNIDATA/EmojiSources.txt
228 re = /\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc41\u200d\ud83d\udde8|(?:[\u0023\u002a\u0030-\u0039])\ufe0f?\u20e3|(?:(?:\ud83c\udfcb|\ud83d[\udd75\udd90]|[\u261d\u26f9\u270c\u270d])(?:\ufe0f|(?!\ufe0e))|\ud83c[\udf85\udfc2-\udfc4\udfc7\udfca]|\ud83d[\udc42\udc43\udc46-\udc50\udc66-\udc69\udc6e\udc70-\udc78\udc7c\udc81-\udc83\udc85-\udc87\udcaa\udd7a\udd95\udd96\ude45-\ude47\ude4b-\ude4f\udea3\udeb4-\udeb6\udec0]|\ud83e[\udd18-\udd1e\udd26\udd30\udd33-\udd39\udd3c-\udd3e]|[\u270a\u270b])(?:\ud83c[\udffb-\udfff]|)|\ud83c\udde6\ud83c[\udde8-\uddec\uddee\uddf1\uddf2\uddf4\uddf6-\uddfa\uddfc\uddfd\uddff]|\ud83c\udde7\ud83c[\udde6\udde7\udde9-\uddef\uddf1-\uddf4\uddf6-\uddf9\uddfb\uddfc\uddfe\uddff]|\ud83c\udde8\ud83c[\udde6\udde8\udde9\uddeb-\uddee\uddf0-\uddf5\uddf7\uddfa-\uddff]|\ud83c\udde9\ud83c[\uddea\uddec\uddef\uddf0\uddf2\uddf4\uddff]|\ud83c\uddea\ud83c[\udde6\udde8\uddea\uddec\udded\uddf7-\uddfa]|\ud83c\uddeb\ud83c[\uddee-\uddf0\uddf2\uddf4\uddf7]|\ud83c\uddec\ud83c[\udde6\udde7\udde9-\uddee\uddf1-\uddf3\uddf5-\uddfa\uddfc\uddfe]|\ud83c\udded\ud83c[\uddf0\uddf2\uddf3\uddf7\uddf9\uddfa]|\ud83c\uddee\ud83c[\udde8-\uddea\uddf1-\uddf4\uddf6-\uddf9]|\ud83c\uddef\ud83c[\uddea\uddf2\uddf4\uddf5]|\ud83c\uddf0\ud83c[\uddea\uddec-\uddee\uddf2\uddf3\uddf5\uddf7\uddfc\uddfe\uddff]|\ud83c\uddf1\ud83c[\udde6-\udde8\uddee\uddf0\uddf7-\uddfb\uddfe]|\ud83c\uddf2\ud83c[\udde6\udde8-\udded\uddf0-\uddff]|\ud83c\uddf3\ud83c[\udde6\udde8\uddea-\uddec\uddee\uddf1\uddf4\uddf5\uddf7\uddfa\uddff]|\ud83c\uddf4\ud83c\uddf2|\ud83c\uddf5\ud83c[\udde6\uddea-\udded\uddf0-\uddf3\uddf7-\uddf9\uddfc\uddfe]|\ud83c\uddf6\ud83c\udde6|\ud83c\uddf7\ud83c[\uddea\uddf4\uddf8\uddfa\uddfc]|\ud83c\uddf8\ud83c[\udde6-\uddea\uddec-\uddf4\uddf7-\uddf9\uddfb\uddfd-\uddff]|\ud83c\uddf9\ud83c[\udde6\udde8\udde9\uddeb-\udded\uddef-\uddf4\uddf7\uddf9\uddfb\uddfc\uddff]|\ud83c\uddfa\ud83c[\udde6\uddec\uddf2\uddf8\uddfe\uddff]|\ud83c\uddfb\ud83c[\udde6\udde8\uddea\uddec\uddee\uddf3\uddfa]|\ud83c\uddfc\ud83c[\uddeb\uddf8]|\ud83c\uddfd\ud83c\uddf0|\ud83c\uddfe\ud83c[\uddea\uddf9]|\ud83c\uddff\ud83c[\udde6\uddf2\uddfc]|\ud83c[\udccf\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude32-\ude36\ude38-\ude3a\ude50\ude51\udf00-\udf20\udf2d-\udf35\udf37-\udf7c\udf7e-\udf84\udf86-\udf93\udfa0-\udfc1\udfc5\udfc6\udfc8\udfc9\udfcf-\udfd3\udfe0-\udff0\udff4\udff8-\udfff]|\ud83d[\udc00-\udc3e\udc40\udc44\udc45\udc51-\udc65\udc6a-\udc6d\udc6f\udc79-\udc7b\udc7d-\udc80\udc84\udc88-\udca9\udcab-\udcfc\udcff-\udd3d\udd4b-\udd4e\udd50-\udd67\udda4\uddfb-\ude44\ude48-\ude4a\ude80-\udea2\udea4-\udeb3\udeb7-\udebf\udec1-\udec5\udecc\uded0-\uded2\udeeb\udeec\udef4-\udef6]|\ud83e[\udd10-\udd17\udd20-\udd25\udd27\udd3a\udd40-\udd45\udd47-\udd4b\udd50-\udd5e\udd80-\udd91\uddc0]|[\u23e9-\u23ec\u23f0\u23f3\u26ce\u2705\u2728\u274c\u274e\u2753-\u2755\u2795-\u2797\u27b0\u27bf\ue50a]|(?:\ud83c[\udc04\udd70\udd71\udd7e\udd7f\ude02\ude1a\ude2f\ude37\udf21\udf24-\udf2c\udf36\udf7d\udf96\udf97\udf99-\udf9b\udf9e\udf9f\udfcc-\udfce\udfd4-\udfdf\udff3\udff5\udff7]|\ud83d[\udc3f\udc41\udcfd\udd49\udd4a\udd6f\udd70\udd73\udd74\udd76-\udd79\udd87\udd8a-\udd8d\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa\udecb\udecd-\udecf\udee0-\udee5\udee9\udef0\udef3]|[\u00a9\u00ae\u203c\u2049\u2122\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23ed-\u23ef\u23f1\u23f2\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267b\u267f\u2692-\u2694\u2696\u2697\u2699\u269b\u269c\u26a0\u26a1\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f7\u26f8\u26fa\u26fd\u2702\u2708\u2709\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299])(?:\ufe0f|(?!\ufe0e))/g,
230 // avoid runtime RegExp creation for not so smart,
231 // not JIT based, and old browsers / engines
234 // avoid using a string literal like '\u200D' here because minifiers expand it inline
235 U200D = String.fromCharCode(0x200D),
237 // used to find HTML special chars in attributes
238 rescaper = /[&<>'"]/g,
240 // nodes with type 1 which should **not** be parsed (including lower case svg)
241 shouldntBeParsed = /IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|SELECT|STYLE|TEXTAREA|[a-z]/,
243 // just a private shortcut
244 fromCharCode = String.fromCharCode;
249 /////////////////////////
250 // private functions //
252 /////////////////////////
255 * Shortcut to create text nodes
256 * @param string text used to create DOM text node
257 * @return Node a DOM node with that text
259 function createText(text) {
260 return document.createTextNode(text);
264 * Utility function to escape html attribute text
265 * @param string text use in HTML attribute
266 * @return string text encoded to use in HTML attribute
268 function escapeHTML(s) {
269 return s.replace(rescaper, replacer);
273 * Default callback used to generate emoji src
274 * based on Twitter CDN
275 * @param string the emoji codepoint string
276 * @param string the default size to use, i.e. "36x36"
277 * @return string the image source to use
279 function defaultImageSrcGenerator(icon, options) {
280 return ''.concat(options.base, options.size, '/', icon, options.ext);
284 * Given a generic DOM nodeType 1, walk through all children
285 * and store every nodeType 3 (#text) found in the tree.
286 * @param Element a DOM Element with probably some text in it
287 * @param Array the list of previously discovered text nodes
288 * @return Array same list with new discovered nodes, if any
290 function grabAllTextNodes(node, allText) {
292 childNodes = node.childNodes,
293 length = childNodes.length,
297 subnode = childNodes[length];
298 nodeType = subnode.nodeType;
299 // parse emoji only in text nodes
300 if (nodeType === 3) {
301 // collect them to process emoji later
302 allText.push(subnode);
304 // ignore all nodes that are not type 1 or that
305 // should not be parsed as script, style, and others
306 else if (nodeType === 1 && !shouldntBeParsed.test(subnode.nodeName)) {
307 grabAllTextNodes(subnode, allText);
314 * Used to both remove the possible variant
315 * and to convert utf16 into code points.
316 * If there is a zero-width-joiner (U+200D), leave the variants in.
317 * @param string the raw text of the emoji match
319 function grabTheRightIcon(rawText) {
320 // if variant is present as \uFE0F
321 return toCodePoint(rawText.indexOf(U200D) < 0 ?
322 rawText.replace(UFE0Fg, '') :
328 * DOM version of the same logic / parser:
329 * emojify all found sub-text nodes placing images node instead.
330 * @param Element generic DOM node with some text in some child node
331 * @param Object options containing info about how to parse
333 * .callback Function the callback to invoke per each found emoji.
334 * .base string the base url, by default twemoji.base
335 * .ext string the image extension, by default twemoji.ext
336 * .size string the assets size, by default twemoji.size
338 * @return Element same generic node with emoji in place, if any.
340 function parseNode(node, options) {
342 allText = grabAllTextNodes(node, []),
343 length = allText.length,
359 fragment = document.createDocumentFragment();
360 subnode = allText[length];
361 text = subnode.nodeValue;
363 while ((match = re.exec(text))) {
366 fragment.appendChild(
367 createText(text.slice(i, index))
371 iconId = grabTheRightIcon(rawText);
372 i = index + rawText.length;
373 src = options.callback(iconId, options);
376 img.onerror = options.onerror;
377 img.setAttribute('draggable', 'false');
378 attrib = options.attributes(rawText, iconId);
379 for (attrname in attrib) {
381 attrib.hasOwnProperty(attrname) &&
382 // don't allow any handlers to be set + don't allow overrides
383 attrname.indexOf('on') !== 0 &&
384 !img.hasAttribute(attrname)
386 img.setAttribute(attrname, attrib[attrname]);
389 img.className = options.className;
393 fragment.appendChild(img);
395 if (!img) fragment.appendChild(createText(rawText));
398 // is there actually anything to replace in here ?
400 // any text left to be added ?
401 if (i < text.length) {
402 fragment.appendChild(
403 createText(text.slice(i))
406 // replace the text node only, leave intact
407 // anything else surrounding such text
408 subnode.parentNode.replaceChild(fragment, subnode);
415 * String/HTML version of the same logic / parser:
416 * emojify a generic text placing images tags instead of surrogates pair.
417 * @param string generic string with possibly some emoji in it
418 * @param Object options containing info about how to parse
420 * .callback Function the callback to invoke per each found emoji.
421 * .base string the base url, by default twemoji.base
422 * .ext string the image extension, by default twemoji.ext
423 * .size string the assets size, by default twemoji.size
425 * @return the string with <img tags> replacing all found and parsed emoji
427 function parseString(str, options) {
428 return replace(str, function (rawText) {
431 iconId = grabTheRightIcon(rawText),
432 src = options.callback(iconId, options),
436 // recycle the match string replacing the emoji
437 // with its image counter part
438 ret = '<img '.concat(
439 'class="', options.className, '" ',
440 'draggable="false" ',
441 // needs to preserve user original intent
442 // when variants should be copied and pasted too
450 attrib = options.attributes(rawText, iconId);
451 for (attrname in attrib) {
453 attrib.hasOwnProperty(attrname) &&
454 // don't allow any handlers to be set + don't allow overrides
455 attrname.indexOf('on') !== 0 &&
456 ret.indexOf(' ' + attrname + '=') === -1
458 ret = ret.concat(' ', attrname, '="', escapeHTML(attrib[attrname]), '"');
461 ret = ret.concat('>');
468 * Function used to actually replace HTML special chars
469 * @param string HTML special char
470 * @return string encoded HTML special char
472 function replacer(m) {
477 * Default options.attribute callback
480 function returnNull() {
485 * Given a generic value, creates its squared counterpart if it's a number.
486 * As example, number 36 will return '36x36'.
487 * @param any a generic value.
488 * @return any a string representing asset size, i.e. "36x36"
489 * only in case the value was a number.
490 * Returns initial value otherwise.
492 function toSizeSquaredAsset(value) {
493 return typeof value === 'number' ?
494 value + 'x' + value :
499 /////////////////////////
500 // exported functions //
502 /////////////////////////
504 function fromCodePoint(codepoint) {
505 var code = typeof codepoint === 'string' ?
506 parseInt(codepoint, 16) : codepoint;
507 if (code < 0x10000) {
508 return fromCharCode(code);
512 0xD800 + (code >> 10),
513 0xDC00 + (code & 0x3FF)
517 function parse(what, how) {
518 if (!how || typeof how === 'function') {
519 how = {callback: how};
521 // if first argument is string, inject html <img> tags
522 // otherwise use the DOM tree and parse text nodes only
523 return (typeof what === 'string' ? parseString : parseNode)(what, {
524 callback: how.callback || defaultImageSrcGenerator,
525 attributes: typeof how.attributes === 'function' ? how.attributes : returnNull,
526 base: typeof how.base === 'string' ? how.base : twemoji.base,
527 ext: how.ext || twemoji.ext,
528 size: how.folder || toSizeSquaredAsset(how.size || twemoji.size),
529 className: how.className || twemoji.className,
530 onerror: how.onerror || twemoji.onerror
534 function replace(text, callback) {
535 return String(text).replace(re, callback);
538 function test(text) {
539 // IE6 needs a reset before too
541 var result = re.test(text);
546 function toCodePoint(unicodeSurrogates, sep) {
552 while (i < unicodeSurrogates.length) {
553 c = unicodeSurrogates.charCodeAt(i++);
555 r.push((0x10000 + ((p - 0xD800) << 10) + (c - 0xDC00)).toString(16));
557 } else if (0xD800 <= c && c <= 0xDBFF) {
560 r.push(c.toString(16));
563 return r.join(sep || '-');