如何删除 <br> 从文本节点和包装 <p> </i> 标签，当它包含

Question

我的情况（编辑）：

<div class="entry-content">
    <h1>This header won't be included</h1>
    Write by: Me
    <br></br>
    On: 01/01/2017
    <br></br>
    <br></br>
    When you quote: "<i>And whoever strives only strives for [the benefit of] himself.</i>"
    <br></br>
    <br></br>
    <i>There</i> is another: "And that <b>there is not for man</b> except that [good] for which he strives, and that his effort is going to be seen, then <a href="#">he will be</a> recompensed for it with the fullest recompense."
    <br></br>
    <br></br>
    <h2>And neither will this one</h2>
    I fight for myself.
</div>

我的目标（编辑）：

<div class="entry-content">
    <h1>This header won't be included</h1>
    <p>Write by: Me
    <br></br>
    On: 01/01/2017</p>
    <p>When you quote: "<i>And whoever strives only strives for [the benefit of] himself.</i>"</p>
    </p><i>There</i> is another: "And that <b>there is not for man</b> except that [good] for which he strives, and that his effort is going to be seen, then <a hre="#">he will be</a> recompensed for it with the fullest recompense."</p>
    <h2>And neither will this one</h2>
    <p>I fight for myself.</p>
</div>

我试过了：

$( ".entry-content" )
  .contents()
  .filter(function() {
     return this.nodeType === 3;
   })
  .wrap( "<p></p>" )
  .end()
  .filter( "br" )
  .remove();

我之前也读了很多这样的： 如何包装文本节点 。 但他们无法处理<i> ， <b> ， <a>等。

它们看起来像这样：

<div class="entry-content">
    <p><h1>This header won't be included</h1></p>
    <p>Write by: Me</p>
    <p>On: 01/01/2017</p>
    <p>When you quote: "</p>
    <i>And whoever strives only strives for [the benefit of] himself.</i>
    <p>"</p>
    <i>There</i>
    <p>is another: "And that <b>there is not for man</b> except that [good] for which he strives, and that his effort is going to be seen, then</p>
    <a hre="#">he will be</a>
    <p>recompensed for it with the fullest recompense."</p>
    <p><h2>And neither will this one</h2></p>
    <p>I fight for myself.</p>
</div>

Answer 1

我希望这是你需要的：

 var rows = $(".entry-content").html().split("<br>"); rows = $.map(rows, function(value) { return value === "" ? null : value; }); $(".entry-content").html('<p>' + rows.join("</p>\\n<p>") + '</p>'); console.log($(".entry-content").html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="entry-content"> When you quote: "<i>And whoever strives only strives for [the benefit of] himself.</i>" <br><br> <i>There</i> is another: "And that <b>there is not for man</b> except that [good] for which he strives, and that his effort is going to be seen, then <a hre="#">he will be</a> recompensed for it with the fullest recompense." <br><br> I fight for myself. </div> 

Answer 2

这是一个“单行”，不涉及触摸内部HTML文本。 它的工作原理是用每个节点包装自己的段落，然后展开每个br ，这样相邻的兄弟和第一个子选择器就可以用来找到包装段落应该开始的点。

编辑：为了特别排除包含带有源属性的图像的标题，块引用和锚点，我必须更长时间。 一个更高效的实现是在没有jQuery的情况下遍历子节点; 如果您需要经常运行，请告诉我，我可以提供替代实施。 很难解决jQuery处理文本节点的方式，除了.contents()之外，它几乎都会丢弃它们。

 console.log( // Begin magic $('.entry-content') .contents() .wrap('<p>') .filter('br, :header, blockquote, a:has(img[src])') .unwrap() .end() .end() .children(':first-child, :not(p) + p') .each(function (i, e) { $(e).nextUntil(':not(p)').addBack().wrapAll('<p>').contents().unwrap() }) .end() .children(':first-child, :not(p) + p') .each(function (i, e) { e.firstElementChild || e.textContent.trim() || $(e).remove() }) .end() .children('br') .remove() // End magic .end().html()) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="entry-content"> <h1>This header won't be included</h1> When you quote: "<i>And whoever strives only strives for [the benefit of] himself.</i>" <br><br> <i>There</i> is another: "And that <b>there is not for man</b> except that [good] for which he strives, and that his effort is going to be seen, then <a href="#">he will be</a> recompensed for it with the fullest recompense." <br><br> <h2>And neither will this one</h2> I fight for myself. <blockquote>Keep me</blockquote> I am special. <a><img src="http://ignore-me.com"></a> There <b>is</b> nothing more special than everything <a><img src="http://ignore-me-too.com"></a> </div>