Faster emojify() by avoiding str.replace() entirely (#4049)
parent
331f0953e9
commit
e282580101
@ -1,60 +1,55 @@
|
|||||||
import emojione from 'emojione';
|
import emojione from 'emojione';
|
||||||
|
import Trie from 'substring-trie';
|
||||||
|
|
||||||
const toImage = str => shortnameToImage(unicodeToImage(str));
|
const mappedUnicode = emojione.mapUnicodeToShort();
|
||||||
|
const trie = new Trie(Object.keys(emojione.jsEscapeMap));
|
||||||
|
|
||||||
const unicodeToImage = str => {
|
function emojify(str) {
|
||||||
const mappedUnicode = emojione.mapUnicodeToShort();
|
// This walks through the string from start to end, ignoring any tags (<p>, <br>, etc.)
|
||||||
|
// and replacing valid shortnames like :smile: and :wink: as well as unicode strings
|
||||||
return str.replace(emojione.regUnicode, unicodeChar => {
|
// that _aren't_ within tags with an <img> version.
|
||||||
if (typeof unicodeChar === 'undefined' || unicodeChar === '' || !(unicodeChar in emojione.jsEscapeMap)) {
|
// The goal is to be the same as an emojione.regShortNames/regUnicode replacement, but faster.
|
||||||
return unicodeChar;
|
let i = -1;
|
||||||
}
|
|
||||||
|
|
||||||
const unicode = emojione.jsEscapeMap[unicodeChar];
|
|
||||||
const short = mappedUnicode[unicode];
|
|
||||||
const filename = emojione.emojioneList[short].fname;
|
|
||||||
const alt = emojione.convert(unicode.toUpperCase());
|
|
||||||
|
|
||||||
return `<img draggable="false" class="emojione" alt="${alt}" title="${short}" src="/emoji/${filename}.svg" />`;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const shortnameToImage = str => {
|
|
||||||
// This walks through the string from end to start, ignoring any tags (<p>, <br>, etc.)
|
|
||||||
// and replacing valid shortnames like :smile: and :wink: that _aren't_ within
|
|
||||||
// tags with an <img> version.
|
|
||||||
// The goal is to be the same as an emojione.regShortNames replacement, but faster.
|
|
||||||
// The reason we go backwards is because then we can replace substrings as we go.
|
|
||||||
let i = str.length;
|
|
||||||
let insideTag = false;
|
let insideTag = false;
|
||||||
let insideShortname = false;
|
let insideShortname = false;
|
||||||
let shortnameEndIndex = -1;
|
let shortnameStartIndex = -1;
|
||||||
while (i--) {
|
let match;
|
||||||
|
while (++i < str.length) {
|
||||||
const char = str.charAt(i);
|
const char = str.charAt(i);
|
||||||
if (insideShortname && char === ':') {
|
if (insideShortname && char === ':') {
|
||||||
const shortname = str.substring(i, shortnameEndIndex + 1);
|
const shortname = str.substring(shortnameStartIndex, i + 1);
|
||||||
if (shortname in emojione.emojioneList) {
|
if (shortname in emojione.emojioneList) {
|
||||||
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
|
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
|
||||||
const alt = emojione.convert(unicode.toUpperCase());
|
const alt = emojione.convert(unicode.toUpperCase());
|
||||||
const replacement = `<img draggable="false" class="emojione" alt="${alt}" title="${shortname}" src="/emoji/${unicode}.svg" />`;
|
const replacement = `<img draggable="false" class="emojione" alt="${alt}" title="${shortname}" src="/emoji/${unicode}.svg" />`;
|
||||||
str = str.substring(0, i) + replacement + str.substring(shortnameEndIndex + 1);
|
str = str.substring(0, shortnameStartIndex) + replacement + str.substring(i + 1);
|
||||||
|
i += (replacement.length - shortname.length - 1); // jump ahead the length we've added to the string
|
||||||
} else {
|
} else {
|
||||||
i++; // stray colon, try again
|
i--; // stray colon, try again
|
||||||
}
|
}
|
||||||
insideShortname = false;
|
insideShortname = false;
|
||||||
} else if (insideTag && char === '<') {
|
} else if (insideTag && char === '>') {
|
||||||
insideTag = false;
|
insideTag = false;
|
||||||
} else if (char === '>') {
|
} else if (char === '<') {
|
||||||
insideTag = true;
|
insideTag = true;
|
||||||
insideShortname = false;
|
insideShortname = false;
|
||||||
} else if (!insideTag && char === ':') {
|
} else if (!insideTag && char === ':') {
|
||||||
insideShortname = true;
|
insideShortname = true;
|
||||||
shortnameEndIndex = i;
|
shortnameStartIndex = i;
|
||||||
|
} else if (!insideTag && (match = trie.search(str.substring(i)))) {
|
||||||
|
const unicodeStr = match;
|
||||||
|
if (unicodeStr in emojione.jsEscapeMap) {
|
||||||
|
const unicode = emojione.jsEscapeMap[unicodeStr];
|
||||||
|
const short = mappedUnicode[unicode];
|
||||||
|
const filename = emojione.emojioneList[short].fname;
|
||||||
|
const alt = emojione.convert(unicode.toUpperCase());
|
||||||
|
const replacement = `<img draggable="false" class="emojione" alt="${alt}" title="${short}" src="/emoji/${filename}.svg" />`;
|
||||||
|
str = str.substring(0, i) + replacement + str.substring(i + unicodeStr.length);
|
||||||
|
i += (replacement.length - unicodeStr.length); // jump ahead the length we've added to the string
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
};
|
}
|
||||||
|
|
||||||
export default function emojify(text) {
|
export default emojify;
|
||||||
return toImage(text);
|
|
||||||
};
|
|
||||||
|
Loading…
Reference in new issue