原生JS實現parseHtml並做一定修改

licoded發表於2020-11-01
JSHTML

script text/template 用來除錯很舒服，再也不用擔心字串不好表示了！

<script id="tpl" type="text/template">
html程式碼...
</script>
<script>
    var htmlTpl = tpl.innerHTML;
    // 字串轉換成文件型別
    var domParser = new DOMParser();
    var doc = domParser.parseFromString(htmlTpl, 'text/html');
    doc.querySelectorAll('code').forEach((item)=>{
        oldClass = item.classList[0];
        if(oldClass.indexOf("language-")==0){
            item.setAttribute("class",oldClass.slice(9));
        }
    });
    doc.querySelectorAll('pre').forEach((item)=>{
        item.innerHTML += `<span class="btn-pre-copy" onclick="preCopy(this)">複製程式碼</span>`;
    });
    doc.querySelectorAll('p > img').forEach((item)=>{
        item.parentNode.setAttribute("styles","text-align:center");
    });
    console.log(doc)
</script>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章