Wemoji

wemoji.js

(function(){
var style="apple";

function parse(eles){
    eles.forEach(function(ele){
        if(ele.textContent.match(/\:[a-zA-Z0-9._\-,]+\:/)){
            var rw=emojify(ele.textContent);
            ele.replaceWith(rw[0])
            ele=rw[0]
            if(rw.length>1){
                rw.slice(1).forEach(e=>{ele.parentNode.insertBefore(e, ele.nextSibling);ele=e})
            }
        }
    })
}
function getURL(name){
    console.log(name)
    var emoji=ed.filter(f=>f.short_names.indexOf(name)!=-1)[0]||{image:"2753.png"};
    var u=new URL(emoji.image,"https://cdn.jsdelivr.net/gh/iamcal/emoji-data/img-"+style+"-64/");
    return u.href;
}
function emojify(node){
    var nodes=[];
    var codeStart=node.indexOf(":");
    if(codeStart==-1){return [document.createTextNode(node)]}
    nodes.push(document.createTextNode(node.slice(0,codeStart)))
    var codeEnd=node.indexOf(":",codeStart+1)+1

    var i=document.createElement("img")
    i.src=getURL(node.slice(codeStart+1,codeEnd-1))
    i.classname="emoji";
    i.setAttribute("style","height:1em;margin:0 0.05em 0 0.1em;vertical-align:-0.1em;")

    nodes.push(i)
    nodes=[...nodes, ...emojify(node.slice(codeEnd))]
    return nodes
}
//https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page
function walkNodeTree(root, options) {
    options = options || {};

    const inspect = options.inspect || (n => true),
          collect = options.collect || (n => true);
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ALL,
        {
            acceptNode: function(node) {
                if(!inspect(node)) { return NodeFilter.FILTER_REJECT; }
                if(!collect(node)) { return NodeFilter.FILTER_SKIP; }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );

    const nodes = []; let n;
    while(n = walker.nextNode()) {
        options.callback && options.callback(n);
        nodes.push(n);
    }

    return nodes;
}
var ed;
async function ensureEd(){
    if(!ed){
        var r=await fetch("https://cdn.jsdelivr.net/gh/iamcal/emoji-data/emoji.json");
        ed=await r.json()
    }
}
async function render(style2) {
    style=style2||style
    await ensureEd();
    parse(walkNodeTree(document.body, {
        inspect: n => !['STYLE', 'SCRIPT'].includes(n.nodeName),
        collect: n => (n.nodeType === 3),
    }));
}

async function addCustom(emoji){
    await ensureEd();
    if((!emoji.short_names)&&emoji.short_name){
        emoji.short_names=[emoji.short_name]
    }
    if(emoji.image&&emoji.short_names){}else{throw new Error("Invalid emoji!")}
    ed.push(emoji)
}

window.wemoji={render,addCustom}
})();