html 標簽轉譯反轉譯

如果要在 html 標簽內原樣插入帶 html 標簽的文字，通常都會被自動解析掉，比如：

document.getElementsByTagName('div')[0].innerHTML="<p>ss</p>"

這個代碼的結果就是這樣：

如果不希望的話，就要把特殊字符轉譯，這里就是 </>，不過有另一種方法：

document.getElementsByTagName('div')[0].textContent="<p>ss</p>"

設置 textContent 而不是設置 innerHTML，效果如圖：

因為這樣瀏覽器自動幫你轉譯了，

document.getElementsByTagName('div')[0].innerHTML

這個技巧實際上提供了一個轉譯字符的方法：

function textToHtml (text) {
    let div=document.createElement('div');
    div.textContent=text;
    return div.innerHTML;
}
console.log(textToHtml('<p>'));//&lt;p&gt;

反轉譯：

function htmlToText (html) {
    let div=document.createElement('div');
    div.innerHTML=html;
    return div.textContent;
}
console.log(htmlToText('&lt;p&gt;'));//<p>

參考文檔:

JS實現HTML標簽轉義及反轉義