/*hover */
.cmd-para-err{
    color: #b10000;
}
 .cmd-para-err-parent{
  text-align: center;
  cursor: pointer;
}
.cmd-para-err-parent {
  margin-right: 15px;
  border-color: #fff;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  position: relative;
  font-size: 1.2em;
}

.cmd-para-err-parent:hover {
  color: #c447ed;
}
.cmd-para-err-parent:hover:after {
  left: 50%;
    top: -48px;
    color: #fff;
    background: #c447ed;
    font-size: 14px;
    content: attr(tips);
    display: block;
    padding: 5px 15px;
    position: absolute;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    z-index: 10;
}
.cmd-para-err-parent:hover:before {
    top: -17px;
    left: 50%;
    border: solid;
    border-color: #c447ed transparent;
    border-width: 5px 5px 0 5px;
    content: "";
    display: block;
    position: absolute;
    z-index: 20;
}


/* emoji*/
.myjoypixels128-parent {
    display: inline-block;
    height: 0px;
    vertical-align: top;
    text-align: center;
}

.myjoypixels128 {
    display: inline-block;
    width: 128px;
    height: 128px;
    font-size: 0;
    text-indent: -999em;
    /* background: url(https://xunhanliu.gitee.io/images/qqface.png) 0 0 no-repeat; */
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://xunhanliu.gitee.io/js/md5.js"></script>
<script src="https://blog-static.cnblogs.com/files/xunhanliu/d3.v4.min.js"></script>
<script>
let config={ instructions: ['icon', 'fa-icon',]
};
    String.prototype.firstUpperCase = function () {
        let arr = this.split(/\s+/);
        let uppserCase = ([first, ...rest]) => first.toUpperCase() + rest.join('');
        let result = '';
        arr.forEach((val) => { result += uppserCase(val) + ' '; })
        return result.trim();
    }
    $(function () {
        console.log('调试，用于找文件位置');
        //post-body id  $("#cnblogs_post_body")  其内部都是一些分立的标签
        //head     $('.postTitle')
        function shuffle(arr) {
            var len = arr.length;
            for (var i = 0; i < len - 1; i++) {
                var index = parseInt(Math.random() * (len - i));
                var temp = arr[index];
                arr[index] = arr[len - i - 1];
                arr[len - i - 1] = temp;
            }
            return arr;
        }
        let instructions = config.instructions;
        let eleAggregate = {}
        for (let i in instructions) {
            eleAggregate[instructions[i]] = [];  //[{node,para:{main:'',color:'#f00'}}] main参数是必须的
        }

        let commonCmdReg = /\{\s*(\S{4,100}\s*)+\s*}/;
        function ParseCmdAndReplaceNodes(dom, parent) { //dom 的Tag=text
            //查找指令，并定位位置（可能有多个）
            // let str = "{icon=sdfafdasd}{icon=dddd}{icon=aaaa}"; //用于测试
            let str = dom.textContent;
            let patt = new RegExp(/\{\s*(?<cmd>\S{2,10})\s*=\s*(?<main>[^\}\s]{1,30})\s*(?<otherPara>([^\}\s]{4,100}\s*)*)\}/, "g");
            let result;
            let replacer = document.createElement("span");
            let lastStart = 0;
            let start = str.length;
            while ((result = patt.exec(str)) != null) {
                start = result.index;
                let end = patt.lastIndex; //end 是"}"的后面一个字符

                if (start != lastStart) { //中间有未被匹配的元素
                    replacer.appendChild(document.createTextNode(str.substring(lastStart, start)));
                }
                let iconNode = document.createElement("span");
                replacer.appendChild(iconNode);

                //解析otherPara
                let otherParaMap = {};
                let otherPara = result.groups.otherPara;
                if (otherPara) {
                    let l = otherPara.trim().split(/\s+/);
                    for (let i in l) {
                        let e = l[i].split('=');
                        otherParaMap[e[0]] = e[1];
                    }
                }
                let cmd = result.groups.cmd;
                if (cmd in eleAggregate) {
                    eleAggregate[cmd].push({ node: iconNode, para: { main: result.groups.main, ...otherParaMap }, cmd, text: result[0] })
                }

                lastStart = end;
            }
            if (str.length != lastStart) { //中间有未被匹配的元素
                replacer.appendChild(document.createTextNode(str.substring(lastStart, str.length)));
            }
            parent.replaceChild(replacer, dom);  //使用前面的替换后面的
        }
        function domTree(dom, parent) { //入口是他们的父亲节点
            if (dom.nodeType == 3 && dom.nodeName == '#text') {  //这里是对child进行处理
                //查找，并可能会插入一些元素
                //处理中，需要此元素的父元素。可能会使整个text升级成span元素
                if (commonCmdReg.test(dom.textContent)) {  //包含指令
                    ParseCmdAndReplaceNodes(dom, parent);
                }

            } else {
                let childs = dom.childNodes;
                for (let i = 0; i < childs.length; i++) {
                    domTree(childs[i], dom);
                }
            }
        }
        if (commonCmdReg.test($('.postTitle').text())) {  //匹配到指令，需要做点什么
            let $postTitle = $('.postTitle');
            for (let i = 0; i < $postTitle.length; i++) {
                domTree($('.postTitle')[i], null);
            }
        }
        if (commonCmdReg.test($('#cnblogs_post_body').text())) {
            domTree($('#cnblogs_post_body')[0], null);
        }
        //指令已经解析完毕，eleAggregate存储node和指令的参数。而且原来指令的位置已经被span元素给替代了！
        //通过instructions调用相应的指令处理函数
        for (let i in instructions) {
            let eleList = eleAggregate[instructions[i]];
            try {
                eval(`Cmd_${instructions[i].firstUpperCase().replace(new RegExp("[`\\-~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]", 'g'), '_')}Handel(eleList)`);

            } catch (e) {
                if (e.name == 'ReferenceError') {
                    console.error('博客中有知指令：' + instructions[i] + '; 你可能需要在后台追加此指令对应的处理函数！')
                }
            }

        }



        function Cmd_Fa_iconHandel(eleList) {
            //对fa-icon指令进行处理
            let nameArr = ["glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user", "film", "th-large", "th", "th-list", "check", "times", "search-plus", "search-minus", "power-off", "signal", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download", "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "outdent", "indent", "video-camera", "picture-o", "pencil", "map-marker", "adjust", "tint", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share", "expand", "compress", "plus", "minus", "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash", "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v", "arrows-h", "bar-chart", "twitter-square", "facebook-square", "camera-retro", "key", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out", "linkedin-square", "thumb-tack", "external-link", "sign-in", "trophy", "github-square", "upload", "lemon-o", "phone", "square-o", "bookmark-o", "phone-square", "twitter", "facebook", "github", "unlock", "credit-card", "rss", "hdd-o", "bullhorn", "bell", "certificate", "hand-o-right", "hand-o-left", "hand-o-up", "hand-o-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-down", "globe", "wrench", "tasks", "filter", "briefcase", "arrows-alt", "users", "link", "cloud", "flask", "scissors", "files-o", "paperclip", "floppy-o", "square", "bars", "list-ul", "list-ol", "strikethrough", "underline", "table", "magic", "truck", "pinterest", "pinterest-square", "google-plus-square", "google-plus", "money", "caret-down", "caret-up", "caret-left", "caret-right", "columns", "sort", "sort-desc", "sort-asc", "envelope", "linkedin", "undo", "gavel", "tachometer", "comment-o", "comments-o", "bolt", "sitemap", "umbrella", "clipboard", "lightbulb-o", "exchange", "cloud-download", "cloud-upload", "user-md", "stethoscope", "suitcase", "bell-o", "coffee", "cutlery", "file-text-o", "building-o", "hospital-o", "ambulance", "medkit", "fighter-jet", "beer", "h-square", "plus-square", "angle-double-left", "angle-double-right", "angle-double-up", "angle-double-down", "angle-left", "angle-right", "angle-up", "angle-down", "desktop", "laptop", "tablet", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "reply", "github-alt", "folder-o", "folder-open-o", "smile-o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "reply-all", "star-half-o", "location-arrow", "crop", "code-fork", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "eraser", "puzzle-piece", "microphone", "microphone-slash", "shield", "calendar-o", "fire-extinguisher", "rocket", "maxcdn", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-circle-down", "html5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "minus-square", "minus-square-o", "level-up", "level-down", "check-square", "pencil-square", "external-link-square", "share-square", "compass", "caret-square-o-down", "caret-square-o-up", "caret-square-o-right", "eur", "gbp", "usd", "inr", "jpy", "rub", "krw", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort-numeric-desc", "thumbs-up", "thumbs-down", "youtube-square", "youtube", "xing", "xing-square", "youtube-play", "dropbox", "stack-overflow", "instagram", "flickr", "adn", "bitbucket", "bitbucket-square", "tumblr", "tumblr-square", "long-arrow-down", "long-arrow-up", "long-arrow-left", "long-arrow-right", "apple", "windows", "android", "linux", "dribbble", "skype", "foursquare", "trello", "female", "male", "gratipay", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "caret-square-o-left", "dot-circle-o", "wheelchair", "vimeo-square", "try", "plus-square-o", "space-shuttle", "slack", "envelope-square", "wordpress", "openid", "university", "graduation-cap", "yahoo", "google", "reddit", "reddit-square", "stumbleupon-circle", "stumbleupon", "delicious", "digg", "pied-piper-pp", "pied-piper-alt", "drupal", "joomla", "language", "fax", "building", "child", "paw", "spoon", "cube", "cubes", "behance", "behance-square", "steam", "steam-square", "recycle", "car", "taxi", "tree", "spotify", "deviantart", "soundcloud", "database", "file-pdf-o", "file-word-o", "file-excel-o", "file-powerpoint-o", "file-image-o", "file-archive-o", "file-audio-o", "file-video-o", "file-code-o", "vine", "codepen", "jsfiddle", "life-ring", "circle-o-notch", "rebel", "empire", "git-square", "git", "hacker-news", "tencent-weibo", "qq", "weixin", "paper-plane", "paper-plane-o", "history", "circle-thin", "header", "paragraph", "sliders", "share-alt", "share-alt-square", "bomb", "futbol-o", "tty", "binoculars", "plug", "slideshare", "twitch", "yelp", "newspaper-o", "wifi", "calculator", "paypal", "google-wallet", "cc-visa", "cc-mastercard", "cc-discover", "cc-amex", "cc-paypal", "cc-stripe", "bell-slash", "bell-slash-o", "trash", "copyright", "at", "eyedropper", "paint-brush", "birthday-cake", "area-chart", "pie-chart", "line-chart", "lastfm", "lastfm-square", "toggle-off", "toggle-on", "bicycle", "bus", "ioxhost", "angellist", "cc", "ils", "meanpath", "buysellads", "connectdevelop", "dashcube", "forumbee", "leanpub", "sellsy", "shirtsinbulk", "simplybuilt", "skyatlas", "cart-plus", "cart-arrow-down", "diamond", "ship", "user-secret", "motorcycle", "street-view", "heartbeat", "venus", "mars", "mercury", "transgender", "transgender-alt", "venus-double", "mars-double", "venus-mars", "mars-stroke", "mars-stroke-v", "mars-stroke-h", "neuter", "genderless", "facebook-official", "pinterest-p", "whatsapp", "server", "user-plus", "user-times", "bed", "viacoin", "train", "subway", "medium", "y-combinator", "optin-monster", "opencart", "expeditedssl", "battery-full", "battery-three-quarters", "battery-half", "battery-quarter", "battery-empty", "mouse-pointer", "i-cursor", "object-group", "object-ungroup", "sticky-note", "sticky-note-o", "cc-jcb", "cc-diners-club", "clone", "balance-scale", "hourglass-o", "hourglass-start", "hourglass-half", "hourglass-end", "hourglass", "hand-rock-o", "hand-paper-o", "hand-scissors-o", "hand-lizard-o", "hand-spock-o", "hand-pointer-o", "hand-peace-o", "trademark", "registered", "creative-commons", "gg", "gg-circle", "tripadvisor", "odnoklassniki", "odnoklassniki-square", "get-pocket", "wikipedia-w", "safari", "chrome", "firefox", "opera", "internet-explorer", "television", "contao", "500px", "amazon", "calendar-plus-o", "calendar-minus-o", "calendar-times-o", "calendar-check-o", "industry", "map-pin", "map-signs", "map-o", "map", "commenting", "commenting-o", "houzz", "vimeo", "black-tie", "fonticons", "reddit-alien", "edge", "credit-card-alt", "codiepie", "modx", "fort-awesome", "usb", "product-hunt", "mixcloud", "scribd", "pause-circle", "pause-circle-o", "stop-circle", "stop-circle-o", "shopping-bag", "shopping-basket", "hashtag", "bluetooth", "bluetooth-b", "percent", "gitlab", "wpbeginner", "wpforms", "envira", "universal-access", "wheelchair-alt", "question-circle-o", "blind", "audio-description", "volume-control-phone", "braille", "assistive-listening-systems", "american-sign-language-interpreting", "deaf", "glide", "glide-g", "sign-language", "low-vision", "viadeo", "viadeo-square", "snapchat", "snapchat-ghost", "snapchat-square", "pied-piper", "first-order", "yoast", "themeisle", "google-plus-official", "font-awesome", "handshake-o", "envelope-open", "envelope-open-o", "linode", "address-book", "address-book-o", "address-card", "address-card-o", "user-circle", "user-circle-o", "user-o", "id-badge", "id-card", "id-card-o", "quora", "free-code-camp", "telegram", "thermometer-full", "thermometer-three-quarters", "thermometer-half", "thermometer-quarter", "thermometer-empty", "shower", "bath", "podcast", "window-maximize", "window-minimize", "window-restore", "window-close", "window-close-o", "bandcamp", "grav", "etsy", "imdb", "ravelry", "eercast", "microchip", "snowflake-o", "superpowers", "wpexplorer", "meetup"];

            console.log(eleList);
            for (let i in eleList) {
                let e = eleList[i].node;
                let para = eleList[i].para;
                e.classList.add('fa');
                nameArr.includes(para.main) ? e.classList.add(`fa-${para.main}`) : e.classList.add('fa-ban');
                if (para['rotate'] && parseInt(para['rotate']) == para['rotate']) {
                    e.classList.add(`fa-rotate-${para['rotate']}`);
                }
                if (para['flip'] && (para['flip'] == 'horizontal' || para['flip'] == 'vertical')) {
                    e.classList.add(`fa-flip-${para['flip']}`);
                }
                if (para['spin']) {
                    e.classList.add(`fa-spin`);
                }
                //把其他参数加入到e的style中
                $(e).css(para);
                e.setAttribute('title', "动画spin,旋转rotate,镜像flip");
            }


        }
        function Cmd_IconHandel(eleList) {
            /**
            * eleList=eleAggregate['icon'];  eleList内部的结构： [{node,para:{main:'',color:'#f00'}}] main参数必须有
            */

            let joypixelsNameList = ["alien-monster", "alien", "angry-face-with-horns", "angry-face", "anguished-face", "anxious-face-with-sweat", "astonished-face", "baby-angel", "baby", "backhand-index-pointing-down", "backhand-index-pointing-left", "backhand-index-pointing-right", "backhand-index-pointing-up", "backpack", "bald", "ballet-shoes", "beaming-face-with-smiling-eyes", "bikini", "billed-cap", "bone", "boy", "brain", "breast-feeding", "bride-with-veil", "briefcase", "briefs", "bust-in-silhouette", "busts-in-silhouette", "call-me-hand", "cat-with-tears-of-joy", "cat-with-wry-smile", "child", "clapping-hands", "closed-umbrella", "clown-face", "clutch-bag", "coat", "cold-face", "confounded-face", "confused-face", "construction-worker", "couple-with-heart-man-man", "couple-with-heart-woman-man", "couple-with-heart-woman-woman", "couple-with-heart", "cowboy-hat-face", "crossed-fingers", "crown", "crying-cat", "crying-face", "curly-hair", "deaf-man", "deaf-person", "deaf-woman", "detective", "disappointed-face", "diving-mask", "dizzy-face", "downcast-face-with-sweat", "dress", "drooling-face", "ear-with-hearing-aid", "ear", "elf", "exploding-head", "expressionless-face", "eye", "eyes", "face-blowing-a-kiss", "face-savoring-food", "face-screaming-in-fear", "face-vomiting", "face-with-hand-over-mouth", "face-with-head-bandage", "face-with-medical-mask", "face-with-monocle", "face-with-open-mouth", "face-with-raised-eyebrow", "face-with-rolling-eyes", "face-with-steam-from-nose", "face-with-symbols-on-mouth", "face-with-tears-of-joy", "face-with-thermometer", "face-with-tongue", "face-without-mouth", "fairy", "family-man-boy-boy", "family-man-boy", "family-man-girl-boy", "family-man-girl-girl", "family-man-girl", "family-man-man-boy-boy", "family-man-man-boy", "family-man-man-girl-boy", "family-man-man-girl-girl", "family-man-man-girl", "family-man-woman-boy-boy", "family-man-woman-boy", "family-man-woman-girl-boy", "family-man-woman-girl-girl", "family-man-woman-girl", "family-woman-boy-boy", "family-woman-boy", "family-woman-girl-boy", "family-woman-girl-girl", "family-woman-girl", "family-woman-woman-boy-boy", "family-woman-woman-boy", "family-woman-woman-girl-boy", "family-woman-woman-girl-girl", "family-woman-woman-girl", "family", "fearful-face", "flat-shoe", "flexed-biceps", "flushed-face", "folded-hands", "foot", "footprints", "frowning-face-with-open-mouth", "frowning-face", "genie", "ghost", "girl", "glasses", "gloves", "goblin", "goggles", "graduation-cap", "grimacing-face", "grinning-cat-with-smiling-eyes", "grinning-cat", "grinning-face-with-big-eyes", "grinning-face-with-smiling-eyes", "grinning-face-with-sweat", "grinning-face", "grinning-squinting-face", "guard", "hand-with-fingers-splayed", "handbag", "handshake", "high-heeled-shoe", "hiking-boot", "hot-face", "hugging-face", "hushed-face", "index-pointing-up", "jack-o-lantern", "jeans", "kimono", "kiss-man-man", "kiss-mark", "kiss-woman-man", "kiss-woman-woman", "kiss", "kissing-cat", "kissing-face-with-closed-eyes", "kissing-face-with-smiling-eyes", "kissing-face", "lab-coat", "left-facing-fist", "leg", "lipstick", "loudly-crying-face", "love-you-gesture", "luggage", "lying-face", "mage", "man-artist", "man-astronaut", "man-bald", "man-beard", "man-blond-hair", "man-bowing", "man-construction-worker", "man-cook", "man-curly-hair", "man-dancing", "man-detective", "man-elf", "man-facepalming", "man-factory-worker", "man-fairy", "man-farmer", "man-firefighter", "man-frowning", "man-genie", "man-gesturing-no", "man-gesturing-ok", "man-getting-haircut", "man-getting-massage", "man-guard", "man-health-worker", "man-in-manual-wheelchair", "man-in-motorized-wheelchair", "man-in-steamy-room", "man-in-suit-levitating", "man-in-tuxedo", "man-judge", "man-kneeling", "man-mage", "man-mechanic", "man-office-worker", "man-pilot", "man-police-officer", "man-pouting", "man-raising-hand", "man-red-hair", "man-running", "man-scientist", "man-shrugging", "man-singer", "man-standing", "man-student", "man-superhero", "man-supervillain", "man-teacher", "man-technologist", "man-tipping-hand", "man-vampire", "man-walking", "man-wearing-turban", "man-white-hair", "man-with-chinese-cap", "man-with-probing-cane", "man-zombie", "man", "mans-shoe", "mechanical-arm", "mechanical-leg", "men-holding-hands", "men-with-bunny-ears", "mermaid", "merman", "merperson", "middle-finger", "money-mouth-face", "mouth", "mrs-claus", "nail-polish", "nauseated-face", "necktie", "nerd-face", "neutral-face", "nose", "ogre", "ok-hand", "old-man", "old-woman", "older-person", "oncoming-fist", "one-piece-swimsuit", "open-hands", "palms-up-together", "partying-face", "pensive-face", "people-holding-hands", "people-with-bunny-ears", "persevering-face", "person-blond-hair", "person-bowing", "person-facepalming", "person-frowning", "person-gesturing-no", "person-gesturing-ok", "person-getting-haircut", "person-getting-massage", "person-in-steamy-room", "person-kneeling", "person-pouting", "person-raising-hand", "person-running", "person-shrugging", "person-standing", "person-tipping-hand", "person-walking", "person-wearing-turban", "person", "pile-of-poo", "pinching-hand", "pleading-face", "police-officer", "pouting-cat", "pouting-face", "pregnant-woman", "prince", "princess", "purse", "raised-back-of-hand", "raised-fist", "raised-hand", "raising-hands", "red-hair", "relieved-face", "rescue-workers-helmet", "right-facing-fist", "ring", "robot", "rolling-on-the-floor-laughing", "running-shoe", "sad-but-relieved-face", "safety-vest", "santa-claus", "sari", "scarf", "selfie", "shorts", "shushing-face", "sign-of-the-horns", "skull-and-crossbones", "skull", "sleeping-face", "sleepy-face", "slightly-frowning-face", "slightly-smiling-face", "smiling-cat-with-heart-eyes", "smiling-face-with-halo", "smiling-face-with-heart-eyes", "smiling-face-with-hearts", "smiling-face-with-horns", "smiling-face-with-smiling-eyes", "smiling-face-with-sunglasses", "smiling-face", "smirking-face", "sneezing-face", "socks", "speaking-head", "squinting-face-with-tongue", "star-struck", "sunglasses", "superhero", "supervillain", "t-shirt", "thinking-face", "thread", "thumbs-down", "thumbs-up", "tired-face", "tongue", "tooth", "top-hat", "unamused-face", "upside-down-face", "vampire", "victory-hand", "vulcan-salute", "waving-hand", "weary-cat", "weary-face", "white-hair", "winking-face-with-tongue", "winking-face", "woman-and-man-holding-hands", "woman-artist", "woman-astronaut", "woman-bald", "woman-blond-hair", "woman-bowing", "woman-construction-worker", "woman-cook", "woman-curly-hair", "woman-dancing", "woman-detective", "woman-elf", "woman-facepalming", "woman-factory-worker", "woman-fairy", "woman-farmer", "woman-firefighter", "woman-frowning", "woman-genie", "woman-gesturing-no", "woman-gesturing-ok", "woman-getting-haircut", "woman-getting-massage", "woman-guard", "woman-health-worker", "woman-in-manual-wheelchair", "woman-in-motorized-wheelchair", "woman-in-steamy-room", "woman-judge", "woman-kneeling", "woman-mage", "woman-mechanic", "woman-office-worker", "woman-pilot", "woman-police-officer", "woman-pouting", "woman-raising-hand", "woman-red-hair", "woman-running", "woman-scientist", "woman-shrugging", "woman-singer", "woman-standing", "woman-student", "woman-superhero", "woman-supervillain", "woman-teacher", "woman-technologist", "woman-tipping-hand", "woman-vampire", "woman-walking", "woman-wearing-turban", "woman-white-hair", "woman-with-headscarf", "woman-with-probing-cane", "woman-zombie", "woman", "womans-boot", "womans-clothes", "womans-hat", "womans-sandal", "women-holding-hands", "women-with-bunny-ears", "woozy-face", "worried-face", "writing-hand", "yarn", "yawning-face", "zany-face", "zipper-mouth-face", "zombie"];
            let joypixelsNameListTrim = [["alien", "monster"], ["alien"], ["angry", "face", "with", "horn"], ["angry", "face"], ["anguish", "face"], ["anxiou", "face", "with", "sweat"], ["astonish", "face"], ["baby", "angel"], ["baby"], ["backhand", "index", "point", "down"], ["backhand", "index", "point", "left"], ["backhand", "index", "point", "right"], ["backhand", "index", "point", "up"], ["backpack"], ["bald"], ["ballet", "sho"], ["beam", "face", "with", "smil", "ey"], ["bikini"], ["bill", "cap"], ["bone"], ["boy"], ["brain"], ["breast", "feed"], ["bride", "with", "veil"], ["briefcase"], ["brief"], ["bust", "in", "silhouette"], ["bust", "in", "silhouette"], ["call", "me", "hand"], ["cat", "with", "tear", "of", "joy"], ["cat", "with", "wry", "smile"], ["child"], ["clapp", "hand"], ["clos", "umbrella"], ["clown", "face"], ["clutch", "bag"], ["coat"], ["cold", "face"], ["confound", "face"], ["confus", "face"], ["construction", "worker"], ["couple", "with", "heart", "man", "man"], ["couple", "with", "heart", "woman", "man"], ["couple", "with", "heart", "woman", "woman"], ["couple", "with", "heart"], ["cowboy", "hat", "face"], ["cross", "finger"], ["crown"], ["cry", "cat"], ["cry", "face"], ["curly", "hair"], ["deaf", "man"], ["deaf", "person"], ["deaf", "woman"], ["detective"], ["disappoint", "face"], ["div", "mask"], ["dizzy", "face"], ["downcast", "face", "with", "sweat"], ["dres"], ["drool", "face"], ["ear", "with", "hear", "aid"], ["ear"], ["elf"], ["explod", "head"], ["expressionles", "face"], ["eye"], ["ey"], ["face", "blow", "a", "kis"], ["face", "savor", "food"], ["face", "scream", "in", "fear"], ["face", "vomit"], ["face", "with", "hand", "over", "mouth"], ["face", "with", "head", "bandage"], ["face", "with", "medical", "mask"], ["face", "with", "monocle"], ["face", "with", "open", "mouth"], ["face", "with", "rais", "eyebrow"], ["face", "with", "roll", "ey"], ["face", "with", "steam", "from", "nose"], ["face", "with", "symbol", "on", "mouth"], ["face", "with", "tear", "of", "joy"], ["face", "with", "thermometer"], ["face", "with", "tongue"], ["face", "without", "mouth"], ["fairy"], ["family", "man", "boy", "boy"], ["family", "man", "boy"], ["family", "man", "girl", "boy"], ["family", "man", "girl", "girl"], ["family", "man", "girl"], ["family", "man", "man", "boy", "boy"], ["family", "man", "man", "boy"], ["family", "man", "man", "girl", "boy"], ["family", "man", "man", "girl", "girl"], ["family", "man", "man", "girl"], ["family", "man", "woman", "boy", "boy"], ["family", "man", "woman", "boy"], ["family", "man", "woman", "girl", "boy"], ["family", "man", "woman", "girl", "girl"], ["family", "man", "woman", "girl"], ["family", "woman", "boy", "boy"], ["family", "woman", "boy"], ["family", "woman", "girl", "boy"], ["family", "woman", "girl", "girl"], ["family", "woman", "girl"], ["family", "woman", "woman", "boy", "boy"], ["family", "woman", "woman", "boy"], ["family", "woman", "woman", "girl", "boy"], ["family", "woman", "woman", "girl", "girl"], ["family", "woman", "woman", "girl"], ["family"], ["fearful", "face"], ["flat", "shoe"], ["flex", "bicep"], ["flush", "face"], ["fold", "hand"], ["foot"], ["footprint"], ["frown", "face", "with", "open", "mouth"], ["frown", "face"], ["genie"], ["ghost"], ["girl"], ["glass"], ["glov"], ["goblin"], ["goggl"], ["graduation", "cap"], ["grimac", "face"], ["grinn", "cat", "with", "smil", "ey"], ["grinn", "cat"], ["grinn", "face", "with", "big", "ey"], ["grinn", "face", "with", "smil", "ey"], ["grinn", "face", "with", "sweat"], ["grinn", "face"], ["grinn", "squint", "face"], ["guard"], ["hand", "with", "finger", "splay"], ["handbag"], ["handshake"], ["high", "heel", "shoe"], ["hik", "boot"], ["hot", "face"], ["hugg", "face"], ["hush", "face"], ["index", "point", "up"], ["jack", "o", "lantern"], ["jean"], ["kimono"], ["kis", "man", "man"], ["kis", "mark"], ["kis", "woman", "man"], ["kis", "woman", "woman"], ["kis"], ["kiss", "cat"], ["kiss", "face", "with", "clos", "ey"], ["kiss", "face", "with", "smil", "ey"], ["kiss", "face"], ["lab", "coat"], ["left", "fac", "fist"], ["leg"], ["lipstick"], ["loudly", "cry", "face"], ["love", "you", "gesture"], ["luggage"], ["ly", "face"], ["mage"], ["man", "artist"], ["man", "astronaut"], ["man", "bald"], ["man", "beard"], ["man", "blond", "hair"], ["man", "bow"], ["man", "construction", "worker"], ["man", "cook"], ["man", "curly", "hair"], ["man", "danc"], ["man", "detective"], ["man", "elf"], ["man", "facepalm"], ["man", "factory", "worker"], ["man", "fairy"], ["man", "farmer"], ["man", "firefighter"], ["man", "frown"], ["man", "genie"], ["man", "gestur", "no"], ["man", "gestur", "ok"], ["man", "gett", "haircut"], ["man", "gett", "massage"], ["man", "guard"], ["man", "health", "worker"], ["man", "in", "manual", "wheelchair"], ["man", "in", "motoriz", "wheelchair"], ["man", "in", "steamy", "room"], ["man", "in", "suit", "levitat"], ["man", "in", "tuxedo"], ["man", "judge"], ["man", "kneel"], ["man", "mage"], ["man", "mechanic"], ["man", "office", "worker"], ["man", "pilot"], ["man", "police", "officer"], ["man", "pout"], ["man", "rais", "hand"], ["man", "r", "hair"], ["man", "runn"], ["man", "scientist"], ["man", "shrugg"], ["man", "singer"], ["man", "stand"], ["man", "student"], ["man", "superhero"], ["man", "supervillain"], ["man", "teacher"], ["man", "technologist"], ["man", "tipp", "hand"], ["man", "vampire"], ["man", "walk"], ["man", "wear", "turban"], ["man", "white", "hair"], ["man", "with", "chinese", "cap"], ["man", "with", "prob", "cane"], ["man", "zombie"], ["man"], ["man", "shoe"], ["mechanical", "arm"], ["mechanical", "leg"], ["men", "hold", "hand"], ["men", "with", "bunny", "ear"], ["mermaid"], ["merman"], ["merperson"], ["middle", "finger"], ["money", "mouth", "face"], ["mouth"], ["mr", "clau"], ["nail", "polish"], ["nauseat", "face"], ["necktie"], ["nerd", "face"], ["neutral", "face"], ["nose"], ["ogre"], ["ok", "hand"], ["old", "man"], ["old", "woman"], ["older", "person"], ["oncom", "fist"], ["one", "piece", "swimsuit"], ["open", "hand"], ["palm", "up", "together"], ["party", "face"], ["pensive", "face"], ["people", "hold", "hand"], ["people", "with", "bunny", "ear"], ["persever", "face"], ["person", "blond", "hair"], ["person", "bow"], ["person", "facepalm"], ["person", "frown"], ["person", "gestur", "no"], ["person", "gestur", "ok"], ["person", "gett", "haircut"], ["person", "gett", "massage"], ["person", "in", "steamy", "room"], ["person", "kneel"], ["person", "pout"], ["person", "rais", "hand"], ["person", "runn"], ["person", "shrugg"], ["person", "stand"], ["person", "tipp", "hand"], ["person", "walk"], ["person", "wear", "turban"], ["person"], ["pile", "of", "poo"], ["pinch", "hand"], ["plead", "face"], ["police", "officer"], ["pout", "cat"], ["pout", "face"], ["pregnant", "woman"], ["prince"], ["princes"], ["purse"], ["rais", "back", "of", "hand"], ["rais", "fist"], ["rais", "hand"], ["rais", "hand"], ["r", "hair"], ["reliev", "face"], ["rescue", "worker", "helmet"], ["right", "fac", "fist"], ["r"], ["robot"], ["roll", "on", "the", "floor", "laugh"], ["runn", "shoe"], ["sad", "but", "reliev", "face"], ["safety", "vest"], ["santa", "clau"], ["sari"], ["scarf"], ["selfie"], ["short"], ["shush", "face"], ["sign", "of", "the", "horn"], ["skull", "and", "crossbon"], ["skull"], ["sleep", "face"], ["sleepy", "face"], ["slightly", "frown", "face"], ["slightly", "smil", "face"], ["smil", "cat", "with", "heart", "ey"], ["smil", "face", "with", "halo"], ["smil", "face", "with", "heart", "ey"], ["smil", "face", "with", "heart"], ["smil", "face", "with", "horn"], ["smil", "face", "with", "smil", "ey"], ["smil", "face", "with", "sunglass"], ["smil", "face"], ["smirk", "face"], ["sneez", "face"], ["sock"], ["speak", "head"], ["squint", "face", "with", "tongue"], ["star", "struck"], ["sunglass"], ["superhero"], ["supervillain"], ["t", "shirt"], ["think", "face"], ["thread"], ["thumb", "down"], ["thumb", "up"], ["tir", "face"], ["tongue"], ["tooth"], ["top", "hat"], ["unamus", "face"], ["upside", "down", "face"], ["vampire"], ["victory", "hand"], ["vulcan", "salute"], ["wav", "hand"], ["weary", "cat"], ["weary", "face"], ["white", "hair"], ["wink", "face", "with", "tongue"], ["wink", "face"], ["woman", "and", "man", "hold", "hand"], ["woman", "artist"], ["woman", "astronaut"], ["woman", "bald"], ["woman", "blond", "hair"], ["woman", "bow"], ["woman", "construction", "worker"], ["woman", "cook"], ["woman", "curly", "hair"], ["woman", "danc"], ["woman", "detective"], ["woman", "elf"], ["woman", "facepalm"], ["woman", "factory", "worker"], ["woman", "fairy"], ["woman", "farmer"], ["woman", "firefighter"], ["woman", "frown"], ["woman", "genie"], ["woman", "gestur", "no"], ["woman", "gestur", "ok"], ["woman", "gett", "haircut"], ["woman", "gett", "massage"], ["woman", "guard"], ["woman", "health", "worker"], ["woman", "in", "manual", "wheelchair"], ["woman", "in", "motoriz", "wheelchair"], ["woman", "in", "steamy", "room"], ["woman", "judge"], ["woman", "kneel"], ["woman", "mage"], ["woman", "mechanic"], ["woman", "office", "worker"], ["woman", "pilot"], ["woman", "police", "officer"], ["woman", "pout"], ["woman", "rais", "hand"], ["woman", "r", "hair"], ["woman", "runn"], ["woman", "scientist"], ["woman", "shrugg"], ["woman", "singer"], ["woman", "stand"], ["woman", "student"], ["woman", "superhero"], ["woman", "supervillain"], ["woman", "teacher"], ["woman", "technologist"], ["woman", "tipp", "hand"], ["woman", "vampire"], ["woman", "walk"], ["woman", "wear", "turban"], ["woman", "white", "hair"], ["woman", "with", "headscarf"], ["woman", "with", "prob", "cane"], ["woman", "zombie"], ["woman"], ["woman", "boot"], ["woman", "cloth"], ["woman", "hat"], ["woman", "sandal"], ["women", "hold", "hand"], ["women", "with", "bunny", "ear"], ["woozy", "face"], ["worri", "face"], ["writ", "hand"], ["yarn"], ["yawn", "face"], ["zany", "face"], ["zipper", "mouth", "face"], ["zombie"]];

            let translateStrList = eleList.map(d => {
                return d.para.main;
            });

            if (eleList.length != 0) {

                //开始翻译
                let query = '苹果\norange\n汽车';
                // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
                query = translateStrList.join('\n');
                let appid = '';  //这里填写你在百度翻译上申请的东东
                let key = '';  //这里填写你在百度翻译上申请的东东
                let salt = (new Date).getTime();
                let str1 = appid + query + salt + key;
                let sign = MD5(str1);
                let tryTimes = 0;
                console.log('调试，用于定位元素');
                let run = () => {
                    $.ajax({
                        url: 'https://api.fanyi.baidu.com/api/trans/vip/translate',
                        type: 'get',
                        dataType: 'jsonp',
                        data: {
                            q: query,
                            appid: appid,
                            salt: salt,
                            from: 'auto',
                            to: 'en',
                            sign: sign
                        },
                    }).then(function (data) {
                        if (data['error_code']) {
                            tryTimes += 1;
                            if (tryTimes >= 10) {
                                console.error('百度翻译api的token可能已过期或者被封！')
                            } else {
                                setTimeout(() => { run() }, 1000);
                            }
                            return;
                        }
                        let resultList = [];
                        for (let i = 0; i < data.trans_result.length; i++) {
                            let d = data.trans_result[i];
                            let str_n = d.dst.toLocaleLowerCase();
                            //注意通过测试，str_n内部可能含有\n
                            let str_n_list = str_n.split('\\n')

                            for (let j in str_n_list) {
                                let str = str_n_list[j];
                                let resultStr = '';
                                if (str.endsWith('ed') || str.endsWith('es')) {
                                    resultStr = str.substring(0, str.length - 2);
                                } else if (str.endsWith('s')) {
                                    resultStr = str.substring(0, str.length - 1);
                                }
                                else if (str.endsWith('ed')) {
                                    resultStr = str.substring(0, str.length - 3);
                                } else {
                                    resultStr = str;
                                }
                                resultList.push(resultStr)
                            }
                        }

                        //剔除后缀 ed ing  es 然后进行匹配
                        //打乱匹配
                        function JoypixelsNameListTrimItemCmp(arr, str) {
                            for (let i in arr) {
                                if (arr[i].indexOf(str) == 0 || str.indexOf(arr[i]) == 0)
                                    return true;
                            }
                            return false;
                        }
                        let arrIndex = [];
                        for (let i = 0; i < joypixelsNameList.length; i++) {
                            arrIndex.push(i);
                        }
                        arrIndex = shuffle(arrIndex);
                        let pngSrcList = resultList.map(d => {
                            //对d进行按照顺序arrIndex进行匹配joypixelsNameListTrim
                            for (let i = 0; i < arrIndex.length; i++) {
                                if (JoypixelsNameListTrimItemCmp(joypixelsNameListTrim[arrIndex[i]], d)) {
                                    //如果对d匹配到了
                                    return joypixelsNameList[arrIndex[i]] + '.png';
                                }

                            }
                            return "notFound"
                        });
                        //记得对子元素计算缩放，对父窗口计算width

                        for (let i in pngSrcList) {
                            if (pngSrcList[i] === 'notFound') {
                                CmdParaErr(eleList[i]);
                                continue;
                            }
                            let $element = $(eleList[i].node);
                            let parentHeight = parseInt($(eleList[i].node.parentNode).css('font-size'));
                            let rate = parentHeight * 56 / (42 * 128);
                            let size = parentHeight * 56 / 42;
                            $element.width(size);
                            let x = d3.scaleLinear().domain([18.67, 37.33]).range([-57, -47]);
                            let y = d3.scaleLinear().domain([18.67, 37.33]).range([-52, -45]);
                            eleList[i].node.classList.add('myjoypixels128-parent')
                            $element.html(`<span style="transform: translate(${x(size)}px,${y(size)}px) scale(${rate});background-image:url(https://xunhanliu.gitee.io/images/people/${pngSrcList[i]})" class="myjoypixels128"></span>`);
                        }
                    });
                }
                run();
            }

        }
        function CmdParaErr(myE) {
            //指令被识别了，并且有对应的处理函数。参数传递有误或者参数无法解析。
            //myE: {node,para}
            myE.node.classList.add('cmd-para-err-parent');
            myE.node.setAttribute('tips', '参数传递有误或者参数无法解析');
            $(myE.node).html(`${myE.text.substring(0, myE.text.length - 1)} <span  class="fa fa-warning  cmd-para-err"></span>}`)

        }

    });


</script>