Raw html conversion with jquery

Question

I want to convert <p> ... <code>&lt;div id='asd'&gt;asd&lt;/div&gt;</code></p> to <p> ... <code><div id='asd'>asd</div></code></p> with jquery.

In other saying I want to apply using jquery what @Html.Raw(HttpUtility.HtmlDecode(html)) does as in asp.net MVC.

I tried the solutions of similar problems(link1, link2), but they aren't enough to solve my problem. There occured two problems; replace doesn't replace all matching as in this fiddle (I solved this problem with this link); and the converted code isn't shown as expected in html and browser. Hierarchy of html is destroyed.

for detail:

The string to be decoded:

<p>fddfg dfgdfgdfg dfgdfgdfgd  <em>asdasd</em> <strong>cvbncvbn</strong> <code>&amp;lt;div id='asd'&amp;gt;asd&amp;lt;/div&amp;gt;</code></p>

Html output after html decode:

<p>
   fddfg dfgdfgdfg dfgdfgdfgd
   <em>asdasd</em>
   <strong>cvbncvbn</strong>
   <code></code>
</p>
<div id="asd">
   <code>asd</code>
</div>
<p></p>

Browser output after html decode:

fddfg dfgdfgdfg dfgdfgdfgd asdasd cvbncvbn

asd

You can see the problem in fiddle (look at, especially at console):

Expected or desired browser output:

fddfg dfgdfgdfg dfgdfgdfgd asdasd cvbncvbn <div id='asd'>asd</div>

Why this broken html output comes out and how can I solve this?

Have a look: http://stackoverflow.com/questions/6784560/how-to-replace-lt-with-and-gt-with-using-jquery — Ivan Chernykh, Aug 04 '13 at 11:51
I've tried two links you gave, not working? What am I missing? — serefbilge, Aug 04 '13 at 12:06

score 1 · Answer 1 · answered Aug 04 '13 at 12:24

DEMO

var str = $('#test').html($('#test').html()).text();

function decode_str(str) {
    pos = str.indexOf('&lt;');
    while (pos >= 0) {
        str = str.replace('&lt;', '<')
        pos = str.indexOf('&lt;');
    }
    pos = str.indexOf('&gt;');
    while (pos >= 0) {
        str = str.replace('&gt;', '>')
        pos = str.indexOf('&gt;');
    }
    return $.trim(str);
}
console.log(decode_str(str));
$('#test').html(decode_str(str));

score 0 · Answer 2 · answered Aug 04 '13 at 12:38

I think this should do what you are after: Example

var str = $('#code').html();

function decode(value) {
    return String(value)
        .replace(/&amp;quot;/g, '"')
        .replace(/&amp;#39;/g, "'")
        .replace(/&amp;lt;/g, '<')
        .replace(/&amp;gt;/g, '>')
        .replace(/&amp;/g, '&');
}
$('#code').text(decode(str));

Updated to match your new example: example

serefbilge · Accepted Answer · 2013-08-04T13:56:09.367

I solved the problem with another way. I decoded html in server side of Asp.Net MVC using HttpUtility.HtmlDecode(html).

In detail;

Server side:

var yorumHtml = "<p>fddfg dfgdfgdfg dfgdfgdfgd  <em>asdasd</em> <strong>cvbncvbn</strong> <code>&amp;lt;div id='asd'&amp;gt;asd&amp;lt;/div&amp;gt;</code></p>";

return Json(new { Success = true, YorumHtml = HttpUtility.HtmlDecode(yorumHtml)});

Client side javascript (In success of Ajax):

$('span#container').html(response.YorumHtml);

Html output:

<p>
   fddfg dfgdfgdfg dfgdfgdfgd
   <em>asdasd</em>
   <strong>cvbncvbn</strong>
   <code><div id='asd'>asd</div></code>
</p>

Browser output:

fddfg dfgdfgdfg dfgdfgdfgd asdasd cvbncvbn <div id='asd'>asd</div>

Raw html conversion with jquery

3 Answers3