Masukkan Kode HTML:
Hasil Parse (escape entity) — klik untuk menyalin:
✅ Tersalin ke clipboard!
<style>
body {font-family: Arial, sans-serif; padding:20px;}
textarea {
width: 100%;
height: 200px;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
}
textarea#output {
margin-top:20px;
width: 100%;
height: 250px;
padding:10px;
border:2px dashed #4caf50;
border-radius:10px;
background:#f9f9f9;
font-family: monospace;
white-space: pre-wrap;
cursor: pointer;
}
.notif {
margin-top:10px;
padding:8px 12px;
background:#4caf50;
color:white;
display:none;
border-radius:6px;
font-size:14px;
width:max-content;
}
</style>
<h2>Masukkan Kode HTML:</h2>
<textarea id="htmlInput" placeholder="Tempelkan kode HTML di sini..."></textarea>
<h2>Hasil Parse (escape entity) — klik untuk menyalin:</h2>
<textarea id="output" readonly></textarea>
<div class="notif" id="notif">✅ Tersalin ke clipboard!</div>
<script>
const textarea = document.getElementById("htmlInput");
const output = document.getElementById("output");
const notif = document.getElementById("notif");
function escapeHTML(str) {
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
textarea.addEventListener("input", function() {
let kode = this.value.trim();
let parsed = `\n${kode}\n`;
output.value = escapeHTML(parsed);
});
// klik langsung copy
output.addEventListener("click", function() {
output.select();
document.execCommand("copy");
// tampilkan notifikasi
notif.style.display = "inline-block";
setTimeout(() => notif.style.display = "none", 1500);
});
</script>
No comments:
Post a Comment