Uncomment html code using javascript

Question

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

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

Kobi · Accepted Answer · 2014-02-18 09:42:01Z

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.

edited Feb 18, 2014 at 9:42

answered Feb 18, 2014 at 9:33

Kobi

139k41 gold badges259 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stevemao Over a year ago

@Kobi can you give a reference for this.data? I can't find any reference that dom elements have a data field. Thanks

TheCuBeMan Over a year ago

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

Kobi Over a year ago

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

TheCuBeMan Over a year ago

So the "initial" selector is a general one (like "table tr" above) and not something specific, let alone NOT the commented element itself...

Kobi Over a year ago

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

Shouvik · Accepted Answer · 2014-02-18 09:25:26Z

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

edited Feb 18, 2014 at 9:25

Shouvik

11.8k17 gold badges61 silver badges90 bronze badges

answered Feb 18, 2014 at 9:18

yotamN

7812 gold badges9 silver badges25 bronze badges

3 Comments

KeyNone Over a year ago

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.

sudhakarssd Over a year ago

yes @BastiM i just want to uncomment those commented lines.

Shouvik Over a year ago

@BastiM If i am not wrong this will just do it to the first occurance of <!-- not all

zippy · Accepted Answer · 2016-02-21 23:33:14Z

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/

Ganz · Accepted Answer · 2014-02-18 09:22:15Z

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

answered Feb 18, 2014 at 9:22

Ganz

1695 bronze badges

2 Comments

sudhakarssd Over a year ago

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.

Ganz Over a year ago

Try this: document.body.innerHTML.replace(//gm, "")

Standin.Wolf · Accepted Answer · 2014-02-18 09:25:02Z

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

answered Feb 18, 2014 at 9:25

Standin.Wolf

1,2341 gold badge10 silver badges33 bronze badges

Collectives™ on Stack Overflow

Uncomment html code using javascript

5 Answers 5

5 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related