I am trying to render a piece of HTML (created by TinyMCE) which is stored in mongodb and later rendered by jade.
Here is my post.content string as it appears from a console.log:
<p>Well, I'll tell you about that...</p><p>Sometimes, we are just not sure about these things <span id="_mce_caret" data-mce-bogus="1" style=""><strong>Until we get some formatting!!!!</strong></span></p>
I expect it to look like this:
Well, I'll tell you about that...
Sometimes, we are just not sure about these things Until we get some formatting!!!!
And this is what I see (copied from chrome):
What am I doing here?
<Well, I'll tell you about that...
Sometimes, we are just not sure about these things Until we get some formatting!!!!
>Well, I'll tell you about that...Sometimes, we are just not sure about these things Until we get some formatting!!!!
>
This is the relevant section of my jade template:
.container.content
h2 #{post.title}
hr
div
#{post.content}
What am I doing wrong?
 apparently is the UTF-8 byte order mark...which points to a formatting problem, but I don't see anywhere where I either said anything about formatting or changed the formatting. It also doesn't make sense to show up in the middle of a thing. Nor does it cause problems with console.log. As for it repeating twice, I am quite befuddled. Perhaps I wrote my template wrong?
Did you already tried what @Marcus Ekwall said? Seems to work fine.
First your test data:
{
post: [ {title: "<p>Well, I'll tell you about that...</p>",
content: '<p>Sometimes, we are just not sure about these things
<span id="_mce_caret" data-mce-bogus="1" style="">
<strong>Until we get some formatting!!!!</strong>
</span>
</p>'}]
}
Next the Jade markup:
.container.content
h2 !{post[0].title}
hr
div
!{post[0].content}
At least the HTML output:
<div class="container content">
<h2><p>Well, I'll tell you about that...</p></h2>
<hr/>
<div>
<p>
Sometimes, we are just not sure about these things
<span id="_mce_caret" data-mce-bogus="1" style="">
<strong>Until we get some formatting!!!!</strong>
</span>
</p>
</div>
</div>
and a working jsFiddle.