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?

I've tried two links you gave, not working? What am I missing? — serefbilge
– serefbilge, Commented Aug 4, 2013 at 12:06

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-04 12:24:14Z

1

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));

answered Aug 4, 2013 at 12:24

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lewis · Accepted Answer · 2013-08-04 12:38:34Z

0

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

answered Aug 4, 2013 at 12:38

lewis

2531 silver badge9 bronze badges

Comments

serefbilge · Accepted Answer · 2013-08-04 13:56:09Z

0

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>

edited Aug 4, 2013 at 13:56

answered Aug 4, 2013 at 13:50

serefbilge

1,7345 gold badges30 silver badges58 bronze badges

Collectives™ on Stack Overflow

Raw html conversion with jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related