jquery - 使用 jquery 进行原始 html 转换

Question

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

换句话说，我想使用 jquery 来应用@Html.Raw(HttpUtility.HtmlDecode(html))在 asp.net MVC 中的作用。

我尝试了类似问题的解决方案（link1，link2），但它们不足以解决我的问题。出现了两个问题；replace 不会像这个小提琴那样替换所有匹配项（我用这个链接解决了这个问题）；并且转换后的代码在 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

您可以在小提琴中看到问题（查看，尤其是在控制台）：

预期或期望的浏览器输出：

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

为什么会出现这个损坏的 html 输出，我该如何解决？

Answer 1

演示

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

function decode_str(str) {
    pos = str.indexOf('<');
    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

我用另一种方式解决了这个问题。我在 Asp.Net MVC 的服务器端使用HttpUtility.HtmlDecode(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>

Answer 3

我认为这应该做你所追求的：示例

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

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

更新以匹配您的新示例：示例