10

Html tables with some commented tags. i just wanted to uncomment those tags. I have tried regex using javascript but problem is it removes entire commented line where as i just wanted to uncomment those tags. Below sample html table with commented tags...

<table>
   <tr>
         <td>ABCD</td>
         <td>Logic</td>
         <!-- <td>26538568</td> -->
   </tr>
</table>

So in above code i just want to uncomment <!-- <td>26538568<td> -->. Please this is part of data scraping from webpage, so i cannot change the html code. Above mentioned table structure is similar to web page from where i am trying extract the data.

4
  • 11
    Why would you do that? If it's just to hide / display HTML there are better days to do this...
    – spassvogel
    Commented Feb 18, 2014 at 9:14
  • Might as well hide it.and do some action and show it.. Commented Feb 18, 2014 at 9:18
  • Basically i am trying to scrape data from web pages with table in which some tags are commented. Commented Feb 18, 2014 at 9:21
  • @Kobi yep, sorry tags should be closed! thanks for noticing. Commented Feb 18, 2014 at 9:41

5 Answers 5

16

You can do it by using the DOM, without treating the document as text. For example, using jQuery:

$('table tr')
 .contents()
 .filter(function(){return this.nodeType === 8;}) //get the comments
 .replaceWith(function(){return this.data;})

The interesting bit here is .contents, which returns all nodes, not just the elements - this includes text nodes and comments.

Working example: http://jsfiddle.net/9Z5T5/2/

Cautionary Note: I'm not sure how cross-browser is this. Specifically, it is possible node.data isn't supported. I've tested this code in Firefox, Chrome, and IE 10.

5
  • @Kobi can you give a reference for this.data? I can't find any reference that dom elements have a data field. Thanks
    – stevemao
    Commented Nov 14, 2014 at 2:30
  • BUT, isn't there a problem getting an hidden (commented) HTML element(s) with jQuery?? When I'm trying to run even a simple selector in JQ for a commented element, it returns nothing, as if this element doesn't exist, as far as JQ is concerned... What's up with that??
    – TheCuBeMan
    Commented Mar 8, 2015 at 11:20
  • @TheCuBeMan - Commented out elements really do not exist as elements, only as commented text. This code can read the comments, but again, there are no HTML elements there.
    – Kobi
    Commented Mar 8, 2015 at 11:53
  • So the "initial" selector is a general one (like "table tr" above) and not something specific, let alone NOT the commented element itself...
    – TheCuBeMan
    Commented Mar 8, 2015 at 14:50
  • By the way, if you want to HTML-escape the comment (e.g. the comment contains "2 < 4"), you can use .replaceWith(function(){return document.createTextNode(this.data);});
    – Kobi
    Commented Sep 29, 2015 at 19:58
5

So you need to do find and replace, for example something like that:

$("body").html($("body").html().replace('<!--', '&lt;!--'));

Then it's would show the comments has text

3
  • 2
    It would be better to replace <!-- with nothing (''), as I suppose the OP doesn't want to see the comment tags, but rather the content as another table cell. Besides: this will replace ALL comments all over the <body> - this may not be what the OP wants to do.
    – KeyNone
    Commented Feb 18, 2014 at 9:23
  • yes @BastiM i just want to uncomment those commented lines. Commented Feb 18, 2014 at 9:27
  • 1
    @BastiM If i am not wrong this will just do it to the first occurance of <!-- not all
    – Shouvik
    Commented Feb 18, 2014 at 9:28
4

There's a very useful little jquery plugin that does precisely this. I didn't write it, but it's open source and here's the code & attribution to original source:

http://vistaprint.github.io/SkinnyJS/jquery.uncomment.html

Works well on our site.

Javascript is:

(function ($) {
    $.fn.uncomment = function () {
        for (var i = 0, l = this.length; i < l; i++) {
            for (var j = 0, len = this[i].childNodes.length; j < len; j++) {
                if (this[i].childNodes[j].nodeType === 8) {
                    var content = this[i].childNodes[j].nodeValue;
                    $(this[i].childNodes[j]).replaceWith(content);
                }
            }
        }
    };
})(jQuery);

Just put your code into

<div class="commented-container">
  <!--
  <script src="some-expensive-widget.js"></script>
  <img src="some-expensive-widget-logo.jpg" />
  -->
</div>

and call it with

 $(".commented-container").uncomment();

We're using it to defer/exclude some image-heavy galleries for mobile users, to speed the page loads.

Part of skinny.js.. which you can find here: http://vistaprint.github.io/SkinnyJS/

-1

Is not the right approach that you're using, it is best to hide the line by putting it to hide and show it on screen with javascript using the method show. This is the correct code:

<table>
   <tr>
         <td>ABCD<td>
         <td>Logic<td>
         <td class='td_hide'>26538568<td>
   </tr>
</table>

<style>
   .td_hide{
       display:none;
   }
</style>

When you want to display the column via javascript, use this:

jQuery('td.td_hide').show();
2
  • 1
    i know its not right approach but i am trying to get data from existing data from web pages so wanted to uncomment some of the tags. Commented Feb 18, 2014 at 9:24
  • Try this: document.body.innerHTML.replace(/<!--(.*?)-->/gm, "")
    – Ganz
    Commented Feb 18, 2014 at 9:28
-2

You could do this if you want

<script>
jQuery('td.#hide').show();
</script>

<table>
   <tr>
         <td>ABCD<td>
         <td>Logic<td>
         <td id='hide' style="display:none">26538568<td>
   </tr>
</table>

So here initially they td element will be hidden,So if you want to invoke add a function and add the above jquery to unhide it..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.