2017-12-30 34 views
1

Ich möchte das SVG mit dangerousSetInnerHTML anzeigen.Gibt es eine Es6-Methode, um eine Escape-HTML-Zeichenfolge zu entfernen?

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

jedoch die SVG-Daten Ich habe ist ein entflohener HTML-String.

Ich denke, das ist ein häufiger Fall im Frontend. Wie auch immer, ich habe eine Google-Suche durchgeführt. Keine der integrierten Methoden konnte alle erkannten Zeichen perfekt verarbeiten.

Die Escape-Methode funktioniert nicht.

Was ist eine übliche Art, mit dieser Zeichenfolge umzugehen?

Schreiben Sie die Ersetzungsmethoden jedes Mal?

 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; 

Antwort

2

Eine Sache, die Sie tun können, ist der entwichene Wert auf ein innerHTML Eigenschaft des HTML-Elements zuweisen, und verwenden Sie dann die textContent Eigenschaft es in unescaped Form zurück zu bekommen.

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);

+0

kühlen. Ich wundere mich nur, dass dieser übliche Fall keine Out-of-Box-Methode hat, um damit umzugehen ^^. danke – newBike

+0

@newBike Keine, die mir bekannt sind. – JLRishe

Verwandte Themen