Item Komentar Dengan JavaScript

Halaman Post ini saya buat untuk menjawab pertanyaan dari MUHAMMAD ODHIE AKBAR pada postingan Membuat Efek Loading Saat Memuat Gambar. Semoga jawaban ini juga bermanfaat bagi sobat semua.

/*CSS ITEM KOMENTAR*/
pre, i[rel="pre"]{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code,i[rel="code"]{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #ddd}
#comments pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
#comments code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #ddd}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
#comments blockquote,b[rel="quote"] {
position:relative;
width:auto;
padding:1em 1.5em;
margin:1em auto;
color:#fff;
background:#7abfcb;
overflow:hidden;
font-family: 'Open Sans', sans-serif, 'Segoe UI',Arial,Tahoma;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
margin-right:15px;
font-size:13px;
}
#comments .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comments .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto;
}
#comments i[rel="image"],
#comments i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comments i[rel="image"]:before,
#comments i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comments i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}

<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('i[rel="image"]', this).replaceWith(function () {
        return $('<img class="cm-image" src="" />').attr("src", $(this).text())
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[    
a = document.getElementById('comments');
if (a) {
    b = a.getElementsByTagName("div");
    for (i = 0; i < b.length; i++) {
        if (b.item(i).getAttribute('CLASS') == 'comment_body') {
            ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
            ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre><code>$1<\/code><\/pre>");
            ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
            ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");   
            ki_comm = ki_comm.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
               ki_comm = ki_comm.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-                youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
             ki_comm = ki_comm.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig,             "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
             ki_comm = ki_comm.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe             class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
             ki_comm = ki_comm.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");       
            b.item(i).innerHTML = ki_comm;
        }
    }
}
//]]>
</script>

Silakan Test Pada komentar dengan tag berikut :
<i rel="pre"> ... KODE ... </i> 
<i rel="code"> ... KODE ... </i> 
[pre]...KODE...[/pre]
[code]...KODE...[/code]
<i rel="image"> ... URL GAMBAR ... </i> 
[img]...URL GAMBAR...[/img] <b rel="quote"> ... CATATAN ... </b> 
[blockquote]...CATATAN...[/blockquote]
[quote]...CATATAN...[/quote]
<i rel="youtube"> ... URL YOUTUBE ... </i> 
[youtube]...URL YOUTUBE...[/youtube]