2

I'm using this jQuery command:

 $('.body-container').append(bodyPart.content).html();

to append HTML content into my body. If "bodyPart.content" is something like:

<strong>Bold</strong>

It works nicely, and show me on my browser:

Bold

But if it's:

&lt;strong&gt; Bold &lt;/strong&gt;

it shows me on the browser:

<strong> Bold </strong>

What to do here to jQuery understand escaped HTML code?

user3810691
  • 531
  • 5
  • 21
  • Try this (a little hack) http://stackoverflow.com/a/19381852/3639582 – Shaunak D May 03 '15 at 18:54
  • @ShaunakD Coincidentally enough, I just found the same method [here](http://stackoverflow.com/questions/10715801/javascript-decoding-html-entities) and used it in my updated answer below. – IronFlare May 03 '15 at 18:59

1 Answers1

1

You can replace the &lt; and &gt; with the proper characters using replace like so:

$("button").click(function(){
    var inp = $("input").val().replace(/&lt;/gi,"<").replace(/&gt;/gi,">");
    $('.body-container').append(inp).html();
});

https://jsfiddle.net/IronFlare/w7edc0cv/

With the help of this question, I think I may have managed to solve your issue (hopefully):

$("button").click(function(){
    $('.body-container').append($('<div/>').html($("input").val()).text());
});

https://jsfiddle.net/IronFlare/w7edc0cv/3/

Community
  • 1
  • 1
IronFlare
  • 2,287
  • 2
  • 17
  • 27
  • I appreciate your help, but you think this is the best solution? Because if it's, I will for the first time think that jQuery is missing something here. – user3810691 May 03 '15 at 18:44
  • 1
    I considered mentioning in my answer that this is kind of cheating, because it is. jQuery has a `$.parseHTML` method, but it only converts the characters to their text equivalents-- exactly what your previous code does. See [here](https://jsfiddle.net/IronFlare/w7edc0cv/1/) for an example of this function. I don't even begin to pretend to know everything about jQuery, but it does appear that the function that you need is nonexistent. – IronFlare May 03 '15 at 18:50
  • On second thought, I may have managed to solve your issue. See my edited answer above. – IronFlare May 03 '15 at 18:57
  • Yes... Looks like this is nonexistent. I'll accept your answer in few time if doesn't appear anything 'official' for this question... I prefer the first solution you gave-me because the second one, if the HTML code isn't escaped, it will mess things up. – user3810691 May 03 '15 at 18:59
  • @user3810691 Refer to my updated answer for a working demo that does not use `replace`. – IronFlare May 03 '15 at 19:05
  • Yes, look the jsfiddle of the updated answer and try to append non escaped value. Something like `Bold`... and you will see that doesn't work... This is why I prefer the first solution. – user3810691 May 03 '15 at 19:10
  • Oh, okay. Sorry for my presumptuousness. My testing didn't take into account varied tags, and so while my test of `<strong> Bold ` rendered properly, it wouldn't have had I used unescaped values for both tags. I didn't realize that until you pointed it out just now. – IronFlare May 03 '15 at 19:15