[Edit]

JavaScript - find all HTML comments

1 contributors

2 contributions

0 discussions

3 points

Created by:

Savannah

559

In this article, we would like to show you how to find all HTML comments using JavaScript.

Quick solution:

xxxxxxxxxx
 
function filterNone() {
    return NodeFilter.FILTER_ACCEPT;
}
​
function findComments(element) {
    var comments = [];
    var iterator = document.createNodeIterator(element, NodeFilter.SHOW_COMMENT, filterNone, false);
    while (true) {
        var node = iterator.nextNode();
        if (node == null) {
            break;
        }
        comments.push(node.nodeValue);
    }
    return comments;
}
​
​
// Usage example:
​
var comments = findComments(document.body); // finds all comments inside body and nested elements

Practical example

Edit

In this example findComments() function returns all comments located inside the indicated element (in our case document.body). The function uses embeded node iterator.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <!-- Comment 1 -->
  <!-- Comment 2 -->
  <script>
​
    function filterNone() {
        return NodeFilter.FILTER_ACCEPT;
    }
​
    function findComments(element) {
        var comments = [];
        var iterator = document.createNodeIterator(element, NodeFilter.SHOW_COMMENT, filterNone, false);
        while (true) {
            var node = iterator.nextNode();
            if (node == null) {
                break;
            }
            comments.push(node.nodeValue);
        }
        return comments;
    }
​
​
    // Usage example:
​
    window.addEventListener('load', function() {
        console.log(findComments(document.body));
    });
​
  </script>
  <!-- Comment 3 -->
  <!-- Comment 4 -->
</body>
</html>

Auto running

Note:

In the example we use addEventListener() method to execute the functon after all elements are loaded. Otherwise it wouldn't find the comments that are after the <script> tag.