Question

我想使用dangerouslySetInnerHTML显示SVG。

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

但是，我得到的SVG数据是一个转义的HTML字符串。

我虽然这是Frontend的一个常见案例。但是，我做了谷歌搜索没有任何内置方法可以完美地处理所有转义字符。

逃避方法不起作用。

处理此字符串的常用方法是什么？

每次都写下替换方法吗？

     var escaped = str.replace(/&/g, '&amp;')
                 .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 = '&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;';

var unescapedValue = unescapeHtml(escapedValue);

console.log(unescapedValue);

任何es6方法来解除转义的html字符串？

1 个答案: