如何找到包含注释的元素并替换它？

Question

我从wysiwyg编辑器输出了一些内容。编辑令人沮丧地为每个新的内容块添加了<p>个标签，并返回如下内容：

    <div class="content">
      <p>lots of content in here.</p> 
      <p><!--pagebreak--></p>
      <p>lots more content in here.</p> 
      <p><!--pagebreak--></p>
      <p>more content here...</p>
   </div>

我需要将<p><!--pagebreak--></p>的所有实例替换为<br><br>以允许其他功能正常运行，但我很难弄清楚我是如何做到的？

我已经阅读了一些有用的帖子，但它们似乎都引用了以太一个id /唯一类关联的元素或文本而不是注释。到目前为止，我最好的猜测是$("<p><!—pagebreak—></p>").replaceWith("<br><br>");这个显然不起作用的东西。

任何人都可以提供任何帮助吗？

由于

修改

看看其他帖子，这似乎非常接近：

var str = "<p><!--pagebreak--></p>";
  var newhtml = $('.container').html().replace(str, '<br><br>');
  $('.content').html(newhtml);

但是这只会删除<p><!--pagebreak--></p>

的第一个实例

Answer 1

你可以找到div，找到嵌套的p元素，过滤那些包含注释的元素，然后替换它们。

＆＃13;

＆＃13;

$('.content').find('p').filter(function(){
  return this.innerHTML.indexOf('<!--pagebreak-->') > -1;
}).replaceWith('<br><br>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>lots of content in here.</p>
  <p>
    <!--pagebreak-->
  </p>
  <p>lots more content in here.</p>
  <p>
    <!--pagebreak-->
  </p>
  <p>more content here...</p>
</div>

＆＃13;

＆＃13;

＆＃13;