期間, 經過研究; 實踐; 改進...
終於找到一個更好, 更方便的程式碼. 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 & 圖片的網址, 建議整句放在同一行, 而沒有其他字句. 顯示較好.
這篇的留言裡, 先作出一個示範展示. 這裡上一張未經處理的原始文字截圖, 作為對比.
放入 [設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>
如下圖...
