Question

我想使用jquery将<p> ... <code>&lt;div id='asd'&gt;asd&lt;/div&gt;</code></p>转换为<p> ... <code><div id='asd'>asd</div></code></p>。

在另一个说法中，我想使用jquery来应用@Html.Raw(HttpUtility.HtmlDecode(html))在asp.net MVC中的作用。

我尝试过类似问题的解决方案（link1，link2），但这些问题还不足以解决我的问题。出现了两个问题;替换不会替换this fiddle中的所有匹配（我用this link解决了这个问题）;并且转换的代码未在html和浏览器中按预期显示。 html的层次结构被破坏了。

详细信息：

要解码的字符串：

<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解码后的Html输出：

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

html解码后的浏览器输出：

fddfg dfgdfgdfg dfgdfgdfgd asdasd cvbncvbn

asd

您可以在fiddle中看到问题（请注意，尤其是在控制台上）：

预期或所需的浏览器输出：

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

为什么这个破坏的html输出出来了，我该如何解决？

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

Answer 2

我认为这应该是你所追求的：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));

已更新，以匹配您的新示例：example

Answer 3

我用另一种方式解决了这个问题。我使用HttpUtility.HtmlDecode(html)解码了Asp.Net MVC服务器端的html。

详细说明;

服务器端：

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

客户端javascript（Ajax成功）：

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

Html输出：

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

浏览器输出：

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

使用jquery进行原始html转换

3 个答案: