Uncomment html code using javascript

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.

Answers:

Answer

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.

Answer

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

Answer

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/

Answer

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.