Results 1 to 2 of 2

Thread: remove html comments from string

  1. #1
    Join Date
    Aug 2008
    Location
    London
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default remove html comments from string

    What is the best way to get rid of html comments in a string? I need to check if there is anything in a div which is not a comment (it can be text, image or text and image).

    I extract the content of div with innerHTML() function but it returns also all the comments. I get something like this

    <--this is comment1-->this is my text.<--this is comment2-->

    instead of

    this is my text.

    I could loop through a string and find substrings which contain "--" and then remove everything between them but I am wondering if there is a better way of doing it.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no innerHTML() function, it is a property of a tag. It is also, though widely supported, non-standard. So the best way would probably be to use DOM level 2 methods. However, they would be more complex than innerHTML.

    Try this out:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    <body>
    <div id="test">
    <!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
    </div>
    <input type="button" onclick="alert(document.getElementById('test').innerHTML.replace(/<!--[^(-->)]+-->/g, ''));" value="Go!">
    </body>
    </html>
    Here's the same thing using DOM level 2:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    function nv(n){
    n = n.cloneNode(true);
    var nvhelper = function(n){
    for (var c = n.childNodes, i = c.length - 1; i > -1; --i){
    if(c[i].hasChildNodes) nvhelper(c[i]);
    if(c[i].nodeType == 8) c[i].parentNode.removeChild(c[i]);
    };
    };
    nvhelper(n);
    alert(n.innerHTML);
    };
    </script>
    </head>
    <body>
    <div id="test">
    <!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
    </div>
    <input type="button" onclick="nv(document.getElementById('test'));" value="Go!">
    </body>
    </html>
    But, depending upon just what you wanted to do, it might be easier to use all DOM level 2, skip alerting the innerHTML, and go directly to the use you have planned for the node, once the comments are stripped.
    Last edited by jscheuer1; 11-01-2008 at 04:26 AM. Reason: add DOM level 2 example
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •