エスケープされたHTML文字列をエスケープ解除するes6メソッドはありますか？

Question

dangerouslySetInnerHTMLを使用してSVGを表示します。

<div dangerouslySetInnerHTML={{__html:props.SVG_Thumbnail__c}} />

しかし、私が得たSVGデータはエスケープHTML文字列です。

私はこれがFrontendの一般的なケースですが、しかし、私はGoogleの検索を行ったが、組み込みのメソッドのどれも、すべてのエスケープされた文字を完全に扱うことができませんでした。

エスケープメソッドが機能しません。

この文字列を処理する一般的な方法は何ですか？

毎回置換メソッドを記述しますか？あなたが行うことができます

 var escaped = str.replace(/&/g, '&') 
       .replace(/</g, '&lt;') 
       .replace(/>/g, '&gt;'); 




    &lt;svg width=&quot;100%&quot; height=&quot;100%&q%&quot; fill=&quot;#ffffff&quot;/&gt;&lt;text x=&quot;5%&quot; y=&quot;50%&quot; font-family=&quot;Lato&quot; font-size=&quot;8px&quot; alignment-baseline=&quot;middle&quot; fill=&quot;#37444e&quot;&gt;Primary Content&lt;/text&gt;&lt;/svg&gt;&lt;svg x=&quot;10%&quot; y=&quot;64%&quot; width=&quot;90%&quot; height=&quot;26%&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#ffffff&quot;/&gt;&lt;text x=&quot;5%&quot; y=&quot;50%&quot; font-family=&quot;Lato&quot; font-size=&quot;8px&quot; alignment-baseline=&quot;middle&quot; fill=&quot;#37444e&quot;&gt;Secondary Content&lt;/text&gt;&lt;/svg&gt;&lt;/svg&gt; 

Answer 1

ことの一つは、HTML要素のinnerHTMLプロパティにエスケープ値を割り当て、再びエスケープ形式でそれを得るためにtextContentプロパティを使用しています。

function unescapeHtml(value) { 
 
    var div = document.createElement('div'); 
 
    div.innerHTML = value; 
 
    return div.textContent; 
 
} 
 

 
var escapedValue = '<svg width="100%" height="100%&q%" fill="#ffffff"/><text x="5%" y="50%" font-family="Lato" font-size="8px" alignment-baseline="middle" fill="#37444e">Primary Content</text></svg><svg x="10%" y="64%" width="90%" height="26%"><rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/><text x="5%" y="50%" font-family="Lato" font-size="8px" alignment-baseline="middle" fill="#37444e">Secondary Content</text></svg></svg>'; 
 

 
var unescapedValue = unescapeHtml(escapedValue); 
 

 
console.log(unescapedValue);