網頁

2016年5月16日

|

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

Views:
一個星期前, 發表了 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 & 圖片的網址, 建議整句放在同一行, 而沒有其他字句. 顯示較好.

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

1 則留言:

  1. Emoji
    😊😎🎃🎤🍙📣🚀⛲⛅🐭🗻🉐

    YouTube
    https://www.youtube.com/watch?v=usO_6-RuCrg

    JPG
    https://c1.staticflickr.com/9/8325/8149501783_656c5e33a1_b.jpg

    GIF
    http://a4.files.theultralinx.com/image/upload/MTI5MDU2ODM1OTcyOTUyMDM0.gif

    PNG
    https://lh3.googleusercontent.com/-X6ia1syva-g/VKX_6CG3O6I/AAAAAAAAGw4/cWfVjB0k-Zk/w506-h438/15.png

    回覆刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃