Uncomment html code with javascript

Question

Html tables with comments. I just wanted to uncomment those tags. I tried regex using javascript, but the problem is that it deletes the entire commented line, as I just wanted to uncomment those tags. Below is a sample html table with comments ...

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

So, in the above code, I just want to uncomment <!-- <td>26538568<td> --> . Please, this is part of the data clips from the web page, so I can not change the html code. The above table structure is like a webpage from where I am trying to extract data.

Answer 1

You can do this 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;}) 

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

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

Warning: I'm not sure if this is a cross browser. In particular, it is possible that node.data not supported. I tested this code in Firefox, Chrome, and IE 10.

Answer 2

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

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

Then it will show that the comments have text

Answer 3

There's a very useful little jquery plugin that does just that. I did not write this, but it is open source, and here is the code and attribution of the original source:

http://vistaprint.imtqy.com/SkinnyJS/jquery.uncomment.html

Works well on our site.

Javascript:

 (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 enter the code in

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

and name him

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

We use it to postpone / exclude some graphic galleries for mobile users to speed up page loading.

Part of skinny.js .. which you can find here: http://vistaprint.imtqy.com/SkinnyJS/

Answer 4

The wrong approach that you use is best to hide the line by setting it to hide and show it on the screen using javascript using the show method. 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> 

If you want to display a column using javascript, use this:

 jQuery('td.td_hide').show(); 

Answer 5

You can do it 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, at first they will be hidden initially, so if you want to call the add function and add the above jquery to display it.