1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptでHTMLエンティティをUnescapeする?

2022-04-18 14:30:25

質問

私は、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("&lt;img src='myimage.jpg'&gt;"); 
// returns "<img src='myimage.jpg'>"

基本的にはプログラムでDOM要素を作成し、そのinnerHTMLにエンコードされたHTMLを割り当て、innerHTML挿入時に作成されたテキストノードからnodeValueを取得するようにしています。 要素を作成するだけで、追加することはないので、サイトのHTMLは変更されません。

これはクロスブラウザー(古いブラウザーも含む)で動作し、すべての HTML文字列の実体 .

EDIT: このコードの古いバージョンは、IEで空白の入力があると動作しないことが証明されています。 jsFiddleではこちら (IEで表示)。上のバージョンは、すべての入力で動作します。

UPDATE: これは大きな文字列では動作しないようです。 セキュリティの脆弱性 コメントをご覧ください。