Công cụ phân tích cú pháp HTML trên Blogger

<!--[ HTML parsing tool by Giahuy.net ]-->
<style>.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{background:rgba(255,255,255,.5);color:#fff}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-sm,.btn-xs{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:4px 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#parser2{position:relative;display:block;clear:both;border-radius:4px;border:1px solid var(--sideBd-color);transition:all .6s}
#parser2 textarea#somewhere{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:var(--fontCode);font-size:14px;border:0;border-radius:4px 4px 0 0;box-shadow:unset;resize: vertical; min-height: calc(100vh - 300px);background:transparent;color:var(--themeC)}
#parser2 .button-group{float:none;background:#ce2c90;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 4px 4px}
.collapse{display:none}
.alert-success{color:#3c763d;background-color:#dff0d8}
.alert{padding:10px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
button.closes{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1;z-index:2}
.closes{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.closes:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id='parser2'>
  <textarea id='somewhere' onfocusin='focusFunction()' placeholder='Viết/dán mã vào đây...'></textarea>
  <div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
    <button class='closes close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;' type='button'>
      <span aria-hidden='true'>×</span>
    </button>
    <h6>Sao chép thành công!</h6>
  </div>
  <div class='button-group'>
    <button class='btn btn-primary btn-sm btn-parse' onclick='convert();textareaReplaceLineBreaks("#somewhere");' type='button'>Phân tích mã</button>
    <button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#somewhere' id='button-link' type='submit'>Sao chép mã</button>
    <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear2();'>Dọn dẹp</button>
  </div>
</div>
<script src='https://cdn.giahuy.net/widget/js/clipboard.min.js'></script>
<script type="text/javascript">
function convert() {
    var ele1 = document.getElementById("somewhere");
    var replaced;
    replaced = ele1.value;
    replaced = replaced.replace(/&/ig, "&amp;");
    replaced = replaced.replace(/</ig, "&lt;");
    replaced = replaced.replace(/>/ig, "&gt;");
    replaced = replaced.replace(/"/ig, "&quot;");
    replaced = replaced.replace(/'/ig, "&#039;");
    replaced = replaced.replace(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    
    ele1.value = replaced;
    document.getElementById("button-link")
        .style.display = "inline-block";
    document.getElementById("btn_clear")
        .style.display = "inline-block";
        document.getElementById("btn-reset")
        .style.display = "none";
}
function cdClear() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear2() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btn-reset")
        .style.display = "none";
}
function focusFunction() {
    document.getElementById("btn-reset").style.display = "block";
}
</script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
    console.log(o), document.getElementById("btnInfo")
        .style.display = "block", document.getElementById("button-link")
        .style.display = "none", document.getElementById("btn-reset")
        .style.display = "none", document.getElementById("somewhere")
        .value = ""
}), clipboard.on("error", function (o) {
    console.log(o)
});
//]]>
</script>