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.

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.

• javascript
• jquery
• html
• regex

• 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.. – Standin.Wolf 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. – sudhakarssd Commented Feb 18, 2014 at 9:21
• @Kobi yep, sorry tags should be closed! thanks for noticing. – sudhakarssd Commented Feb 18, 2014 at 9:41

5 Answers 5

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.

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

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/

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

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