jquery - 当 <b> 元素是 <p> 中唯一的内容时，使用 jQuery 来定位 <b> 元素

Question

我正在通过 RSS 将来自不同来源的各种新闻文章(全部超出我的编码/格式控制范围)导入到我客户的数据库中(全部合法!)，并且我正在尝试标准化它们的一些样式，以便通过 jQuery 在客户网站上呈现。例如...

许多网站使用各种标题标签似乎只是为了格式化。当这些被拉入客户的演示文稿时，它们看起来像垃圾，所以我有工作代码来查找这些代码块并将其替换为样式化的段落(此代码的语义并不重要，我们主要链接回原始源)，并且它有效美好的。代码:

$(document).ready(function() {
    $('#selector h1, #selector h2:not(.article_name), #selector h3, #selector h4, #selector h5').replaceWith(function() {
        return '<p class="h_replace">' + $(this).text() + '</p>';
    });
});

.h_replace CSS 只是放大了 <p>并添加一些其他属性以使其更像标题。到目前为止，一切顺利。

但这就是我遇到困难的地方:相同的网站也经常使用 <p>紧随其后的是一个 child <b> 作为替代/充当 heading 的唯一内容 .

我想查找这些代码块并将其替换为样式段落(如上所述)，但我不成功选择任何 <p>包含仅 <b>元素。也就是说我要选择这个:

<p><b>Some content here.</b></p>

而不是这个:

<p><b>Some Bold Text:</b> and some NOT bold text.</p>

在第一个示例中，<p>仅包含一个 child <b>元素。在第二个示例中 <p>包含一个 child <b>元素以及未包含在子项中的段落文本 <b> .

我希望以编程方式仅选择第一种类型 <p> ，而不是第二个。

有什么想法吗？

这是我到目前为止所得到的，但它选择了两个实例:

$(document).ready(function() {
    $('#selector p b:only-child').parent('p').replaceWith(function() {
        return '<p class="h_replace">' + $(this).text() + '</p>';
    });
});

:only-child我认为选择器是一颗 Elixir ，但是，当然，<b> 是 <p> 的唯一 child 在这两种情况下。

我需要选择包含仅和仅包含的段落<b>内容。

我希望这是清楚的。 一如既往，我们非常感谢任何帮助。

Answer 1

试试这个:

var els = $('p').filter(function() {
    return /^<(b)>.+<\/\1>$/.test($.trim($(this).html()));
});

它会给你所有p有独生子女的b没有任何文本节点。您可以更改(b)使用上面代码中的任何标签。

编辑:不知道为什么投反对票，但这效果很好:

• <p><b>Something</b></p> // true
• <p> <b>Something</b> </p> // true
• <p><b>Something</b> lorem</p> // false
• <p>lorem <b>Something</b></p> // false
• <p><span><b>Something</b></span></p> // false

演示: http://jsfiddle.net/elclanrs/LFt8x/