Selecting HTML comments with jQuery

Question

Does any one know how to select HTML comment nodes with jQuery?

<html>
<head>
    <title>Check Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("body *").each(function() {
                alert($(this).wrap("<span />").parent().html());
            });
        });
    </script>
</head>
<body>
    <!-- Hello -->  
    <p>
        <label for="thing">Thing Label</label>
        <input id="thing" type="checkbox" />
    </p>

This doesn't pick up the comment.

I think answer you marked isn't best. That is a good idea to marking second answer that has more vote. — Mohammad
– Mohammad, Commented Oct 15, 2016 at 16:53

Frank Geueke · Accepted Answer · 2010-09-08 19:54:25Z

118

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

answered Sep 8, 2010 at 19:54

Frank Geueke

1,1812 gold badges7 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ivan Castellanos Over a year ago

This something doesnt always work, this one does: $("*").contents().filter(function(){ return this.nodeType == 8;})

Jason Kleban Over a year ago

@OskarAustegard - That was missing some code to work. Fixed: jsfiddle.net/zM5se/58

Oskar Austegard Over a year ago

yeah, you're right, not sure how that ever worked. Maybe I included the wrong link - there are 58 versions of this one snippet...

mlhDev Over a year ago

nodeType Documentation at MDN

Ejaz Over a year ago

This doesn't work for me. I'm trying to detect  comment but I'm not getting any.

|

karim79 · Accepted Answer · 2009-10-26 09:00:23Z

14

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

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

answered Oct 26, 2009 at 9:00

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

Anthony Johnston Over a year ago

I really need to be able to select the comments in the same way as any other element, but thats a good start, thank you

Mike · Accepted Answer · 2009-10-26 09:43:45Z

13

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

answered Oct 26, 2009 at 9:43

Mike

2,5973 gold badges23 silver badges36 bronze badges

5 Comments

Anthony Johnston Over a year ago

It does return comments, so the above works, thanks for the suggestion

Anthony Johnston Over a year ago

Actually looking again, this is not realy using jquery to do anything useful ie document.body.innerHTML == jQuery('body').html(), and there is more to the regex than suggested here... thinking again, thanks anyway Mike

2rs2ts Over a year ago

The regular expression was appreciated nonetheless by this party.

Chris Calo Over a year ago

This won't select actual comment nodes. It will simply tell you if they are there.

sethpollack Over a year ago

This regex will only work for single line comments. To also handle comments that span lines, try this regex instead: //g

Timothy Petrakis · Accepted Answer · 2012-06-08 19:07:09Z

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.

Collectives™ on Stack Overflow

Selecting HTML comments with jQuery

4 Answers 4

6 Comments

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related