tag?
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 s
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>
This:
<pre>
<‍div>Hello<‍/div>
</pre>
Prints this:
<div>Hello</div>
Zero Width Joiner = ‍
You need to escape the HTML, like so:
You can use HTML entities that are escaped and printed without compiling.
< // will print <
> // will print >
Using these two, you can print any HTML elements.
<div> // will print <div>
To solve your specific problem, you will need to parse the HTML string and convert the chevrons to these entities.