【问题标题】:How to remove <br> from text nodes and wrapping with <p> tag when its contains <b>, <i>, <a>, etc如何从文本节点中删除 <br> 并在其包含 <b>、<i>、<a> 等时用 <p> 标签包装
【发布时间】:2016-12-10 11:05:41
【问题描述】:

我的情况(编辑):

<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。但是他们无法处理&lt;i&gt;&lt;b&gt;&lt;a&gt;等。

它们看起来像这样:

<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>

【问题讨论】:

  • 既然两者的渲染完全一样,你为什么要这么做?

标签: javascript jquery html tags


【解决方案1】:

这是一个不涉及接触内部 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>

【讨论】:

  • 根据你的回答,标题&lt;h1&gt;&lt;h2&gt;等怎么能不被&lt;p&gt;标签包裹呢?我之前忘记问了。
  • 修改了我的答案以排除标题。不过,这会使代码显着膨胀,因此之前存在的任何性能都受到了很大的打击。
  • 给您添麻烦了。我试过你的答案也修复了&lt;blockquote&gt;。只需添加.filter('br, :header')。最后,如何处理&lt;a&gt;&lt;img src="#" /&gt;&lt;/a&gt;,以免被包装在您的代码中。我希望这真的是关于这个问题的最后一个。
  • 当然。在我更新代码的那一刻。因此,您想排除块引用,然后也排除锚点,但前提是它们包含带有src=# 的图像?或者 src 可以是任何东西,并且该元素仍应被忽略?
  • 是的。我只想排除有链接的图片。
【解决方案2】:

我希望这是你需要的:

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>

【讨论】:

  • 你的答案是完美的。非常感谢。
  • 可悲的是,这个答案也改变了我首页的内容。首页的所有内容都变得相同(标题没问题)。当我点击的时候,也没有问题,每个标题都有自己的内容,.
  • @FuturesMe,根据您提供的代码,这是一个绝对正确的答案。
猜你喜欢
  • 2021-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-10-07
  • 2016-01-28
  • 2013-01-06
  • 2018-05-19
相关资源
最近更新 更多