Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!-- saved from url=(0057)http://dte.googlecode.com/svn/brain/map/html-escaper.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Konversi Kode HTML oleh Rifan Hidayat</title>
<style type="text/css">
    body {
    background-color:#2c3e50;
    padding:20px;
    color:#FFF;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    }
​
    p {margin-top:20px;}
    code {
    color:#FF0;
}
    
    #codes {
    border:none;
    width:98%;
    height:200px;
    margin:10px auto 10px;
    display:block;
    background-color:#42576c;
    padding:5px;
    font:normal 12px 'Courier New',Monospace;
    border:1px solid transparent;
    }
    
    #codes:focus {border:1px solid #3FF;color:white;}
​
    .button-group {
        margin:0px auto 0px;
        text-align:center;
    }
    
    button,button[disabled]:active {
        background-color: #930003;
        font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
        color:#999;
        padding:5px 10px;
        border:none;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
        cursor:pointer;
    }
    
    button:active {background-color:white;color:black;}
    button[disabled],button[disabled]:active {opacity:0.4;cursor:default;}
​
    #opt1,
    #opt2,
    #opt3,
    #opt4,
    #opt5 {
        display:inline-block;
        margin:0px 10px 0px 0px;
        vertical-align:middle;
        border:none;
        outline:none;
    }
</style>
</head>
<body>
<textarea spellcheck="false" id="codes" placeholder="Tulis/paste kode di sini lalu klik &#39;Konversi&#39;"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button>
<button onclick="cdClear();">Bersihkan</button>
</div>
<p style='display:none'>
<input checked="true" id="opt1" type="checkbox">Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br>
<input id="opt2" type="checkbox">Konversi <code>'</code> menjadi <code>&amp;#039;</code><br>
<input id="opt3" type="checkbox">Konversi <code>"</code> menjadi <code>&amp;quot;</code><br>
<input checked="true" id="opt4" type="checkbox">Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br>
<input checked="true" id="opt5" type="checkbox">Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</p>
<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(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>
​
</body></html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Rifanpro
0viewers