Selecting HTML comments with jQuery

Solution 1:

This seems to do something equivalent to what you're looking for:

    $(function() {
        $("body").contents().filter(function(){
            return this.nodeType == 8;
        }).each(function(i, e){
            alert(e.nodeValue);
        });
    });

Solution 2:

There's the jQuery comments() plugin which will do that for you. Usage:

var comments = $( "#foo" ).comments();
alert(comments.html());

Solution 3:

And if you don't want a plugin:

var content = jQuery('body').html();
alert(content.match(/<!--.*?-->/g));

This uses regular expressions. It is set to search for anything enclosed by <!-- and --> while it doesn't matter what's written on the inside.

NOTE: I am not sure however, if jQuery also returns comments. If it does not, this approach does not work.

Solution 4:

Once again, I'm late in the game, but I thought I'd contribute back as I found this post helpful in a recent situation I faced.

In our context, we have an ad service delivering blocks of code to render the ad.

Each ad has unique 'flight id'. Meaning the same 250x300 side rail ad can have multiple flights. So in one impression, you might see an ad for Subway, refresh and perhaps Quizno's.

Unfortunately, the service delivers this flight ID in a comment, and not as something a bit more useful like a data-attribute. That said, each comment is within a tag.

From the above, I was able to put together this solution to obtain the flight number in the comment leveraging JavaScript's exec() method of the RegExp object:

regexComment = new RegExp(/<!--\s*ad flight id:\s*([0-9]+)\s*-->/i);
targetElement = regexComment.exec($('div.advertisement').html());
if(targetElement.length > 0) {
    return parseInt(targetElement[1]);
}

Again, apologies for late in the game, but I thought it wouldn't hurt to provide yet another approach to this issue.