javascript - 如何从文本节点中删除 <br> 并在其包含 <b>、<i>、<a> 等时用 <p> 标记换行

标签 javascript jquery html tags

我的情况(编辑):

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

我以前也读过很多这样的书: How can I wrap text nodes 。但他们无法处理 <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>

最佳答案

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

编辑:为了特别排除标题、 block 引号和包含具有源属性的图像的 anchor ,我不得不把它做得更长。一个更高效的实现是在没有 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>

关于javascript - 如何从文本节点中删除 <br> 并在其包含 <b>、<i>、<a> 等时用 <p> 标记换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41074805/

相关文章:

javascript - 路由问题 - 哈希标签 - Angular 2

javascript - 向下滚动 (javascript)

javascript - 主干中的嵌套 View 和事件

javascript - jQuery 函数用 td 内的按钮更改 td 值

单击时的 jquery 列值

jquery - 为什么 HTML 标记中的空格会导致 CSS 不同?

javascript - 初始化脚本

javascript - three.js - 如何让相机在补间期间注视对象

JQuery选择包含行中td内特定文本的所有行

javascript - 如何从数据库动态更新号码