2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃

一個星期前, 發表了 Unicode Emoji 表情符號 2016 版.
期間, 經過研究; 實踐; 改進...
終於找到一個更好, 更方便的程式碼. V2 更新版

• 放棄使用 CSS 對表的方式
• 只是用單一段 JavaScript
• 放入 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>
• 只是針對留言區進行顯示處理
• 對應 Win8/10 浮動鍵盤所有 Emoji (自帶輸入工具設計中)
• 加入 YouTube 超連結對應
• 支援 YouTube 長網址 e.g. https://www.youtube.com/watch?v=usO_6-RuCrg
• 支援 YouTube 短網址 e.g. https://youtu.be/usO_6-RuCrg
• 加入圖片超連結對應 e.g. https://c1.staticflickr.com/9/8325/8149501783_656c5e33a1_b.jpg
• 支援 jpg , jpeg , gif , png 這4種圖片顯示格式
• Enoji 的轉換用了 ECMAScript 6 指令, 因為它完全不被 IE 支援. 所以 IE "被"沒有效果.

先列出整段 JavaScript

<!-- 2016 My Emoji blogspot 顯示 start -->
<script>(function() {
        var c = document.getElementById("comment-holder");
        if (c) {
            var p = c.getElementsByTagName("p");
            for (i = 0; i < p.length; i++) {
                if (p[i].getAttribute("CLASS") == "comment-content") {
                    var str = p[i].innerHTML.replace(/(http(s?):\/(\/[^\/\s]+)+)(\.jpg|\.jpeg|\.gif|\.png)/gi, "<img style='max-width:500px;' src='$&' />");
                    str = str.replace(/http(s?):\/\/www\.youtube\.com\/watch\?v\=.{11}/gi,
                    function(a) {
                        return "<iframe width='500' height='300' src='https://www.youtube.com/embed/" + a.split("v=")[1] + "' frameborder='0' allowfullscreen></iframe>"
                    });
                    str = str.replace(/http(s?):\/\/youtu\.be\/.{11}/gi,
                    function(a) {
                        return "<iframe width='500' height='300' src='https://www.youtube.com/embed/" + a.split("/")[3] + "' frameborder='0' allowfullscreen></iframe>"
                    });
                    if (
                    /*@cc_on!@*/
                    false || !!document.documentMode == false) {
                        str = str.replace(/\ud83c[\udc00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]|\u203c|[\u2b1b-\u2b1c]|[\u2b05-\u2b07]|[\u2049-\u2935]|[\u3030-\u3299]|\u00a9|\u00ae/gi,
                        function(A) {
                            return '<img style="margin: 0 0.1em" width="20" src="//mail.google.com/mail/e/' + A.codePointAt(0).toString(16) + '" />'
                        });
                    }
                    p[i].innerHTML = str;
                };
            };
        };
    })();</script>
<!-- 2016 My Emoji blogspot 顯示 end -->

程式已經指定 Emoji 大小為 20px (第22行 width='20')
YouTube 大小為 500px x 300px (第11,15行 width='500' height='300')
圖片顯示不超過 500px (第8行 max-width:500px)
以上數字因應你的需要, 可以自行修改.
YouTube & 圖片的網址, 建議整句放在同一行, 而沒有其他字句. 顯示較好.

這篇的留言裡, 先作出一個示範展示. 這裡上一張未經處理的原始文字截圖, 作為對比.

安裝只是用單一段 JavaScript,
放入 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>

如下圖...