javascript - javascript から追加された新しい HTML コードをブラウザが解析しないようにする方法

Question

ajax を使用してサーバーから Web ページにテキストを追加したいのですが、テキストにはいくつかの html タグが含まれており、ブラウザーはそのコードを解析してレンダリングする傾向があります。この動作は望ましくありません。html タグを解析せずにそのテキストを追加したいのです。これを達成する方法はありますか？

Answer 1

返された「HTML」をエンコードする必要があります。基本的には、、、、<および>を&再配置する必要<が>あり&ます。

たとえば、サーバーサイドでPHPを使用している場合は、次を使用してこれを行うことができますhtmlspecialchars()。他の言語でも同様の関数またはメソッドを使用できる場合があります（Pythonの場合はcgi.escape、Perlの場合はHTML：Entities 、 System.Web.HttpUtility.HtmlEncodeの場合asp.net ...）。

次のような再調整された文字列でこれを行う場合

this is <strong>bold</strong> text

ブラウザに次のように表示されます

これは太字のテキストです

出力は次のように変更されます

this is <strong>bold</strong> text

として表示されます

これは<strong>太字</strong>のテキストです

Answer 2

node.textContentプロパティ (IE<=8 では element.innerText) を使用して、テキストコンテンツを要素に割り当てます。ブラウザはすべての特殊文字をそれぞれの 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;

デモ

Answer 3

ブラウザ側の 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;"