[解決済み】JavaScriptでHTMLエンティティをUnescapeする?
質問
私は、XML-RPCバックエンドと通信するいくつかのJavaScriptコードを持っています。 XML-RPCはフォームの文字列を返します。
<img src='myimage.jpg'>
しかし、JavaScriptを使ってHTMLに文字列を挿入すると、文字通りにレンダリングされます。画像は表示されず、文字列が表示されるのです。
<img src='myimage.jpg'>
私の推測では、XML-RPCチャンネル上でHTMLがエスケープされているのだと思います。
JavaScriptで文字列のアンエスケープを行うにはどうすればよいですか?このページにあるテクニックを試してみましたが、うまくいきませんでした。 http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/
その他の診断方法を教えてください。
解決方法は?
EDITです。 DOMParser API を以下のように使用する必要があります。 ウラジミールの提案 投稿した関数にセキュリティの脆弱性があったため、以前の回答を編集しました。
次のスニペットは、古い回答のコードに少し修正を加えたものです。
textarea
の代わりに
div
はXSSの脆弱性を軽減しますが、IE9とFirefoxではまだ問題があります。
function htmlDecode(input){
var e = document.createElement('textarea');
e.innerHTML = input;
// handle case of empty input
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
htmlDecode("<img src='myimage.jpg'>");
// returns "<img src='myimage.jpg'>"
基本的にはプログラムでDOM要素を作成し、そのinnerHTMLにエンコードされたHTMLを割り当て、innerHTML挿入時に作成されたテキストノードからnodeValueを取得するようにしています。 要素を作成するだけで、追加することはないので、サイトのHTMLは変更されません。
これはクロスブラウザー(古いブラウザーも含む)で動作し、すべての HTML文字列の実体 .
EDIT: このコードの古いバージョンは、IEで空白の入力があると動作しないことが証明されています。 jsFiddleではこちら (IEで表示)。上のバージョンは、すべての入力で動作します。
UPDATE: これは大きな文字列では動作しないようです。 セキュリティの脆弱性 コメントをご覧ください。
関連
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】module.exports "モジュールが定義されていません"
-
[解決済み】特殊なHTMLエンティティが含まれる文字列をデコードする正しい方法は?[重複している]
-
[解決済み】HTMLエンティティのデコード【重複あり