2011-04-11 15 views
8

Quiero HTML, por ejemplo, <p>, para mostrar solo como eso, en texto plano, y no interpretado por el navegador como una etiqueta real.Cómo insertar HTML como texto

Sé que JQuery tiene .html y .text, pero ¿cómo se hace esto en raw JS?

Hay algunas funciones como encodeURIComponent que codifica <p> a %3Cp%3E pero si acabo de poner eso en HTML, lo interpreta literalmente como %3Cp%3E.

Así que también hay cosas como &gt; y &lt;, funcionan pero no puedo encontrar ninguna función de JavaScript que escapa a & unescapes de esto.

¿Hay una forma correcta de mostrar HTML como texto con JavaScript sin formato?

+0

Uso personalmente la etiqueta obsoleta pero que funciona [XMP] (https://developer.mozilla.org/en/HTML/Element/xmp) como esta: 'document.getElementById ('someDiv').innerHTML = '

Aquí hay algunos HTML

' ' – mplungjan

Respuesta

16

No hay necesidad de escapar de los caracteres. Sólo tiene que utilizar createTextNode:

var text = document.createTextNode('<p>Stuff</p>'); 
document.body.appendChild(text); 

Véase un ejemplo de trabajo aquí: http://jsfiddle.net/tZ3Xj/.

Esto es exactamente como jQuery hace (line 43 of jQuery 1.5.2):

return this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(text)); 
+0

¿Sabes por qué Prototype lo haría de la forma en que lo hacen si esta técnica (de mejor apariencia) funciona? – thirtydot

+0

@thirtydot, ¿se escapa el Prototipo al insertar texto en el DOM o es solo una función de utilidad? Me puedo imaginar escapando para tener sus usos en otro lugar. –

+0

¿Puede ser que createTextNode se escape solo? De todos modos, esa es la función que necesito. Gracias. – foobar

5

La función utilizada por el prototipo parece un buen comienzo:

http://www.prototypejs.org/api/string/escapeHTML

function escapeHTML() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 

versión más se adapte a usar fuera Prototipo:

function escapeHTML(html) { 
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 
1

Este es un trabajo para el método createTextNode

var target div = document.getElementById('div1'); 
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>')); 
1

Es mejor utilizar la etiqueta antes de html

y se puede convertir el uso de this link

por ejemplo, si copia

<p>Hi </p> 

le dará código convertido como ...

&lt;p&gt;Hi &lt;/p&gt; 

Simplemente copia y pega el código anterior en el pre y funcionará bien ...

0

Puede utilizar aslo innerText de la mayoría de los elementos DOM:

document.getElementById('some').innerText = "There can be <b> even HTML tags </b>"; 

no se formateará Las etiquetas . También puede usar \n para nueva línea y más códigos (\t, \u2623 ...). Si también quiere usar caracteres de tamaño fijo, puede usar la etiqueta fácil <pre>.

Cuestiones relacionadas