Using jQuery to target a element when it is the ONLY content in a

https://stackoverflow.com/questions/12275195

30-06-2021
|

Question

I am importing via RSS various news articles from various sources (all beyond my coding/formatting control) into my client's database (all legal!) and I am attempting to standardize some of their styling for presentation on client's site via jQuery. For example...

Many many sites use various header tags seemingly for formatting only. When these are pulled into client's presentation they look like crap, so I have working code to find and replace these code blocks with a styled paragraph (the semantics of this code are not important, we mainly link back to original source), and it works fine. Code:

$(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>';
    });
});

The .h_replace CSS simply enlarges the  and adds some other attributes to make it more heading-like. So far, so good.

But here's where I'm hitting a wall: same sites also often use a  immediately followed with a child  as the only content to substitute/act as a heading.

I want to find and replace these code blocks with a styled paragraph (as above), but I am unsuccessful selecting any  that contains ONLY a  element. That is to say I want to select this:

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

and not this:

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

In the first example, the  contains ONLY a child  element. In the second example the  contains a child  element as well as paragraph text not enclosed in the child .

I am looking to programmatically select only the first type of , and not the second.

Any ideas?

Here's what I've got so far, but it selects both instances:

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

The :only-child selector I thought would be a magic bullet, but then, of course, the  IS the only child of the  in both cases.

I need to select paragraphs that contain only and nothing but  content.

I hope that's clear. As always, any help is always greatly appreciated.

Solution

Try this:

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

It will get you all p that have an only children b without any text nodes. You can change (b) with whatever tag in the code above.

Edit: Don't know why the downvote but this works just fine:

Something // true
 Something // true
Something lorem // false
lorem Something // false
Something // false

Demo: http://jsfiddle.net/elclanrs/LFt8x/

OTHER TIPS

You can use filter() with contents() in order to verify that the  element only has one child node and that node is a  element:

$("#selector p").filter(function() {
    var $contents = $(this).contents();
    return $contents.length == 1 && $contents.eq(0).is("b"); 
}).replaceWith(function() {
    return "<p class='h_replace'>" + $(this).text() + "</p>";
});

elclanrs answer did the trick to select the text properly. Again, demo page is here.

Final code:

$(document).ready(function() {

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

    pbs.replaceWith(function() {
        return '<p class="h_replace">' + $(this).text() + '</p>';
    }).addClass('h_replace2').css('width', '100%');

});

StackOverflow is the greatest. Thanks to everyone who piped in! Saved me hours (and by hours I mean days!!) Thanks!

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow

Using jQuery to target a <b> element when it is the ONLY content in a <p>