jquery - 使用从 <pre></pre> 到 div 的 html 值

Question

考虑以下代码段。

<div class="original" contenteditable="true">
<pre contenteditable="true">&lt;p class="text-centre">
&lt;/bHello World>&lt;/b>
&lt;/p></pre>
</div>

然后我有另一个div如下

<div class="replace">

</div>

正如您在第一个 div 中看到的那样，我将其设置为可编辑，用户可以在其中设置自己的样式 h1, p, tables等等，但现在我只显示 <p> .

我有一个按钮，点击它我想要 <p>来自类为 original 的第一个 div放置在类 replace 的第二个 div 中但考虑到样式，即上面的 <p>应显示为 - Hello World

使用我的 jQuery，我只是将值从一个 div 替换为另一个

<script>
    $(document).ready(function () {
        $('.test').click(function () {
            var replaced = $('.original').html();
            $('.replace').html(replaced);
        });
    });
</script>

Answer 1

要解决此问题，请使用 text() 从 .original 中检索值，以便正确编码 HTML 实体，然后使用 html() 设置.replace div中的内容，像这样:

$('.test').click(function() {
  var replaced = $('.original').text();
  $('.replace').html(replaced);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="original" contenteditable="true">
  <pre contenteditable="true">&lt;p class="text-centre">
&lt;b&gt;Hello World&lt;/b>
&lt;/p></pre>
</div>

<button class="test">Go</button>

<div class="replace"></div>

请注意，我修改了 pre 标记中的 HTML，因为它在您的问题中无效。