Parse HTML

Membuat Widget Parse HTML - Widget ini cocok buat sahabat blogger yang suka berbagi tutorial pada blognya, widget ini hasil modifikasi dari widgetnya Konversi Kode milik DTE:]. Jadi cocok buat para sobat blogger yang suka berbagi tutorial blog, lebih tepatnya cocok buat sobat yang memakai Syntax Highlighter dengan input kode

<pre><code>Kode Disini</code></pre>

<code>Kode Disini</code>

Konversi & menjadi & Konversi ' menjadi ' Konversi " menjadi " Konversi < menjadi < Konversi > menjadi >

<style type='text/css' scoped>
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}
#codes{border:none;width:98%;height:200px;margin:0 auto;display:block;background-color:#F0F0F0;padding:5px;font:normal 12px 'Courier New',Monospace;border:1px solid #ccc}
#codes:focus{background-color:#FFF;color:#303030}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{text-align:center;color:#fff; display:inline-block; white-space:nowrap; background-color:#00aaff;background: linear-gradient(#00aaff,#0994d9); border-radius:2px 2px 2px 2px; cursor:pointer; font-family:Coda; font-size:14px; padding:3px 8px 1px; position:relative; text-shadow:0 1px 0 rgba(0,0,0,0.3); top:-1px; transition:none 0s ease 0s; border:1px solid #888;box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #bbb;}
button:active{background: linear-gradient(#0994d9,#00aaff)}
button[disabled],button[disabled]:active{background: #00aaff;top:0; box-shadow:inset 0 2px 0 rgba(255,255,255,0); }
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
</style><textarea spellcheck="false" id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button>
</div>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code>
<input id="opt2" type="checkbox" />Konversi <code>&#39;</code> menjadi <code>&amp;#039;</code>
<input id="opt3" type="checkbox" />Konversi <code>&quot;</code> menjadi <code>&amp;quot;</code>
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code>
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<\pre\><\code\>");
cv = cv.replace(/$/, "</code></pre>
");
    } else {
        cv = cv.replace(/^/, "<\code\>");
cv = cv.replace(/$/, "</code>");
    }
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>