如何使瀏覽器不解析從javascript添加的新的HTML代碼

Question

我想從我的服務器用ajax添加一些文本到我的網頁，但文本包含一些html標記，瀏覽器傾向於解析代碼並呈現它。我不想要這種行爲，我想在不解析html標籤的情況下添加文本。 有沒有辦法做到這一點？

Answer 1

你必須編碼返回的「HTML」。基本上你必須用<,>和&來代替<,>和&。

，如果你正在使用服務器端上的PHP，例如，你可以做到這一點使用htmlspecialchars() - 可能有類似的功能或可用於其他語言（cgi.escape的蟒蛇，HTML:Entities爲Perl，System.Web.HttpUtility.HtmlEncode的asp.net方法.. ）。

如果你這樣做一個重新調整的字符串，看起來像

this is <strong>bold</strong> text 

在瀏覽器中顯示爲

這是大膽文本

輸出將至極更改爲

this is <strong>bold</strong> text 

至極將顯示爲

這是<強>粗體< /強>文本

Answer 2

在瀏覽器端的javascript：

function htmlEncode(str) { 
    str = str + ""; 
    var el = document.createElement("div"); 
    el.appendChild(document.createTextNode(str)); 
    return el.innerHTML; 
} 

htmlEncode("<div></div>"); 
//"&lt;div&gt;&lt;/div&gt;" 

Answer 3

使用node.textContent屬性（元件。 innerText on IE < = 8）分配tex tual內容添加到元素。瀏覽器將編碼的所有特殊字符到相應的HTML實體：

var h1 = document.getElementsByTagName("h1")[0]; 
if (typeof h1.textContent != "undefined") { 
    h1.textContent = "<b>Hello World</b>"; 
} 
else if (typeof h1.innerText != "undefined") { 
    h1.innerText = "<b>Hello World</b>"; 
} 
alert(h1.innerHTML);​ 
// at this point, the h1 tag will "render" <b>Hello World</b> 
// not the text Hello World in bold face 
// inspecting the element will reveal that html tags, e.g. <b> 
// were converted to &lt;b&gt; 

demo