counting number of characters in a string but want to skip the comments

Question

I wanted to count number of characters in a string which I pull from div tag like this:

$(".welcome-msg").html().length;

However it's counting HTML comments as characters inside the tag. So when I would like the result to be 0 I get 99 because of those comments and I don't have a way of telling if comments are dynamic or not. Is there an easy way to make sure comments are not counted? Or do I have to write regular expression for that?

Thanks,

Answer 1

You can filter comments out, but it is not easy. I will show you how you can filter them on the first level, which is easy, but if they are nested within other tags, then you need to do additional logic.

The key is to .contents() to get all the nodes within. This includes comment nodes. Then you can filter the comment nodes out by comapring against nodeType.

So it would be something like this:

$(".welcome-msg").contents().filter(function() { 
  return this.nodeType != 8;
}).appendTo("<div>").parent().html();

That will work for

<div class=".welcome-msg">
   <!--Comment --><span>hello</span>
</div>

But not for

<div class=".welcome-msg">
    <span><!--Comment -->hello </span> world 
</div>

You would need to iterate through all tags recursively and then it will work for everything.

With regular expressions you would need to be careful about <script> tags and <style> tags.

Here is the jsfiddle

Update (Recursive filter)

Doing it recursively is actually quite easy:

http://jsfiddle.net/xYR5p/3/

Made an entire plugin for it:

$.fn.removeComments = function() {
    this.contents().filter(function() {
        return this.nodeType == 8;  
    }).remove();
    
    this.children().each(function() {
       $(this).removeComments(); 
    });
    
    return this;
};


console.log($(".welcome-msg").clone().removeComments().html());​

Answer 2

var myhtml = $(".welcome-msg").html();
myhtml = myhtml.replace(/<!--.*?-->/sg, ""); 
myhtml.length();

regex from here StackOverflow: Remove HTML comments with Regex, in Javascript