Wie kann ein Text zu HTML in einer Spanne parsen?

Question

Ich habe eine Spanne, die einen variablen Text recieves:

<span>{{$scope.text}}</span>

Seit Backend Ich recieving dieses String:

"text <img src="//i.stack.imgur.com/QrKSV.png"/>" 

Und ich bin speichern sie in der scope.text.

Aber ein Teil von <img> nicht als Bild erkennt, sondern als Text, ich nach einem Weg suchen, den Teil img als Bild zu zeigen. (Es ist für Emoticons in einem Chat implemanting)

Answer 1

Soetwas ? Es klingt wie Sie versuchen, den Text einfach zu entfernen und keine Knotenattribute anzuzeigen. Es gibt verschiedene Methoden, die ähnliche Ergebnisse liefern (-ish). HINWEIS: Das InnerText-Attribut ist entweder veraltet oder wird in verschiedenen Browsern anders behandelt! (http://perfectionkills.com/the-poor-misunderstood-innerText/)

var myEl = document.getElementsByClassName("data-pane")[0]; 
 
var TCEl = document.getElementsByClassName("text-content-container")[0]; 
 
var IHEl = document.getElementsByClassName("inner-html-container")[0]; 
 
var ITEl = document.getElementsByClassName("inner-text-container")[0]; 
 

 
// First, let's output the text content 
 
TCEl.innerHTML = "<h2>Text Content of data pane:</h2><p>"+myEl.textContent; 
 
// console.log("text content of data pane: "+myEl.textContent); 
 

 
// then, let's output the innerHTML 
 
IHEl.innerHTML = "<h2>InnerHTML Content of data pane:</h2><p>"+myEl.innerHTML; 
 
// console.log("innerHTML content of data pane: "+myEl.innerHTML); 
 

 

 
// then, let's output the innerText 
 
ITEl.innerHTML = "<h2>InnerText Content of data pane:</h2><p>"+myEl.innerText; 
 
// console.log("innerText content of data pane: "+myEl.innerText);

<div class="data-pane"> 
 
    This is a <span class="foobly">span tag, nested,</span> and an 
 
    <img alt="foo of the bar in the BAZ, man!" />Image with text. 
 
</div> 
 
<div class="results-pane"> 
 
    <div class="text-content-container"></div> 
 
    <div class="inner-html-container"></div> 
 
    <div class="inner-text-container"></div> 
 
</div>