Menu
How do I put a bit of HTML inside a tag without escaping it? Or am I using an incorrect tag?
P.S. I cannot escape the HTML, it is produced by the server.
784
You can't do that. But you can use templates.
The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text in the <pre> element is displayed in a fixed-width font, but it can be changed using CSS.
Since pre 's categories don't include "Phrasing content", pre cannot be put inside p .
If you have no control over the emitted HTML, you can still encode it on the client side.
Here is how you would escape all markup inside <pre> tags using the jQuery library:
$(function() {
var pre = $('pre');
pre.html(htmlEncode(pre.html()));
});
function htmlEncode(value){
return $('<div/>').text(value).html();
}
Edit: As requested, same code without using jQuery:
function encodePreElements() {
var pre = document.getElementsByTagName('pre');
for(var i = 0; i < pre.length; i++) {
var encoded = htmlEncode(pre[i].innerHTML);
pre[i].innerHTML = encoded;
}
};
function htmlEncode(value) {
var div = document.createElement('div');
var text = document.createTextNode(value);
div.appendChild(text);
return div.innerHTML;
}
And run the encodePreElements after the DOM has been loaded:
<body onLoad='encodePreElements()'>
<pre>Foo <b>bar</b></pre>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
