<h2>HTML Parse Tool</h2>
<textarea
id="codes"
placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"
spellcheck="false"
></textarea>
<div class="kotakjun">
<div class="label-group">
<label class="container"
>Konversi <span style="color: #e06666">&</span> menjadi
<span style="color: #3d85c6">&amp</span>;
<input checked="true" class="cek" id="opt1" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container"
>Konversi <span style="color: #e06666">'</span> menjadi
<span style="color: #3d85c6">&#039</span>;
<input checked="true" class="cek" id="opt2" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container"
>Konversi <span style="color: #e06666">"</span> menjadi
<span style="color: #3d85c6">&quot;</span>
<input checked="true" class="cek" id="opt3" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container"
>Konversi <span style="color: #e06666"><</span> menjadi
<span style="color: #3d85c6">&lt;</span>
<input checked="true" id="opt4" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container"
>Konversi <span style="color: #e06666">></span> menjadi
<span style="color: #3d85c6">&gt;</span>
<input checked="true" id="opt5" type="checkbox" />
<span class="checkmark"></span>
</label>
</div>
<div class="button-group">
<button id="cvrt" onclick="cdConvert()" style="margin-right: 8px">
Konversi
</button>
<button id="clr" onclick="cdClear();">Hapus</button>
</div>
</div>
body {
padding: 10px 20px;
font-family: "Noto Sans", sans-serif;
}
textarea {
width: 100%;
height: 200px;
padding: 10px 15px;
margin-bottom: 25px;
outline: none;
resize: none;
box-sizing: border-box;
}
input {
margin-bottom: 10px;
}
button,
button[disabled]:active {
background: #0b57cf;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
border: 0px;
cursor: pointer;
}
.darkMode #cvrt {
background: #8775f5;
}
button#clr {
background: rgb(161, 161, 161);
}
.darkMode button#clr {
background: rgb(91 91 91);
}
.button-group {
padding-top: 0px;
}
.darkMode textarea {
background: #27313d;
color: #ddd;
}
.kotakjun {
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 5px;
}
@media screen and (max-width: 480px) {
.label-group {
width: 100%;
margin-top: 7px;
}
.button-group {
width: 100%;
margin-top: 10px;
}
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 33px;
margin-bottom: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 2px;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #0b57cf;
}
.darkMode .container input:checked ~ .checkmark {
background-color: var(--dark-link);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 7px;
top: 3.5px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
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, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
}
HTML
CSS
JS