HTML Comments in a JavaScript Block

HTML comments in a javascript block?

Actually, only .

These days it's not really required to use the HTML comments in Javascript anymore. Browsers which are so old as to not understand the <script> tag are highly unlikely to be able to render much of anything on a "modern" website, and you should not have to accommodate users who are quite literally on a stone-age browser.

However, if you're intending to include your HTML inside an xml document, and/or are writing x-html, then you'll have to use the xml <![CDATA[ and ]]> enclosures, as various Javascript operators (&, <, and > in particular) will cause XML parse errors without the enclosures.

Using HTML comment tag !-- -- still relevant around JavaScript code?

HTML comments, ie. , are no longer needed. They were intended to allow browsers that didn't understand the <script> tag to degrade gracefully. These browsers, eg. Netscape 1.x are no longer found in the wild. So there is really no point in putting HTML comments in your script tags anymore.

If you want your HTML to validate as XHTML or XML, you probably want to use a commented out CDATA tag.


<script type="text/javascript">
//<![CDATA[
document.write("Hello World!");
//]]>
</script>

The reason for this is so your <, >, &, " and ' that are part of your javascript code won't have to be encoded as <, >, &, " and ' respectively.

Should I use HTML comments to capsulate JavaScript code blocks?

The HTML comment was intended to hide the JavaScript from ancient browsers that didn't understand the <script> element and instead render its contents on the page. That was way back in the mid-90es, iirc. Nowadays you can safely assume that browsers from that era are no longer present on the web and omit the comments.

Some nice history on that can be found here:

The general rule regarding HTML tags that browsers do not understand is that the browser should ignore the tag completely and treat the content of the page as if that tag were not there. This means that when Netscape 2 first introduced JavaScript (or LiveScript as it was called then), it was necessary to place an HTML comment around the actual script in order to hide the code from other browsers that didn't understand the script tag and which therefore would have displayed the code rather than running it.
The JavaScript language was specifically written to accept the start of an HTML comment as the very first thing in the script and to ignore it in order that the HTML comment could be used to hide the script from people using Netscape 1, Mozaic, Internet Explorer 1, Internet Explorer 2, and other browsers of similar vintage none of which anyone uses any more. It is these prehistoric browsers (in JavaScript terms) that are meant when you see references in antiquated JavaScript tutorials to wrapping your JavaScript inside an HTML comment in order to hide it from "older" browsers.
With Internet Explorer 3, Microsoft introduced their own equivalent to JavaScript which they call JScript. Since then all browsers have at least recognised the script tag and more modern browsers (Netscape 2+, IE3+ etc) the HTML comment is no longer required.So once all your visitors have upgraded to use either Netscape 2, Internet Explorer 3, or a more recent browser than either of those two the commenting out of the script becomes redundant code.

How to comment out a HTML block which contains comments

Short of breaking up the pairs of -- inside the comment, you cannot achieve this in HTML.

If you were generating your HTML from some kind of template language, you could use the template language's comment syntax instead.

Does HTML comment !-- act as a single-line comment in JavaScript, and why?

From testing it seems that JavaSript treats <!-- like // a one-liner

Yes it does, as specified in the ES6 spec, annex B:

B.1.3 HTML-like Comments

Comment ::
    MultiLineComment
    SingleLineComment
    SingleLineHTMLOpenComment
    SingleLineHTMLCloseComment
    SingleLineDelimitedComment

SingleLineHTMLOpenComment ::
    <!-- SingleLineCommentCharsopt

However, note the description of annex B:

This annex describes various legacy features and other characteristics of web browser based ECMAScript implementations. All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. However, the usage of these features by large numbers of existing web pages means that web browsers must continue to support them. The specifications in this annex defined the requirements for interoperable implementations of these legacy features.

These features are not considered part of the core ECMAScript language. Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. ECMAScript implementations are discouraged from implementing these features unless the implementation is part of a web browser or is required to run the same legacy ECMAScript code that web browsers encounter.

So, this part only exists to describe existing "unofficial" behavior and as soon as browsers stop implementing this behavior, will be removed from the spec.

Weird behaviour with HTML comment inside javascript string

Historically ( more than 20 years ago), programmers could wrap their script code within HTML comment tags, within script elements, to prevent browsers which did not support script tags from displaying script text in the page body. You can still put HTML comment tags, which are ignored, around script inside a scripting context:

<script>    <!--    alert(" inside HTML comment tags")    --></script>

Are HTML comments inside script tags a best practice?

The important thing is that nowadays, whether a particular browser supports JavaScript or not is irrelevant (clearly the great majority do) - it is irrelevant because almost all understand script blocks, which means that they know to ignore the JavaScript even if they can't interpret it.

Matt Kruse gives a slightly more detailed explanation on his JavaScript Toolbox site for why specifically not to use HTML comments within script blocks.

Quoted from that page:

Don't Use HTML Comments In Script Blocks

In the ancient days of javascript (1995), some browsers like Netscape 1.0 didn't have any support or knowledge of the script tag. So when javascript was first released, a technique was needed to hide the code from older browsers so they wouldn't show it as text in the page. The 'hack' was to use HTML comments within the script block to hide the code.

Using HTML Comments In Script Is Bad

// DON'T do this! Code is just representative on how things were done
<script language="javascript">
<!--
   // code here
//-->
</script>

No browsers in common use today are ignorant of the <script> tag, so hiding of javascript source is no longer necessary. In fact, it can be considered harmful for the following reasons:

Within XHTML documents, the source will actually be hidden from all browsers and rendered useless
-- is not allowed within HTML comments, so any decrement operations in script are invalid

How to Hide HTML Comments

You can use JavaScript / jQuery to remove the comments on the DOM.

The Code / Example (https://jsfiddle.net/cjqap37e/):

$('*').contents().each(function() {  if(this.nodeType === Node.COMMENT_NODE) {    $(this).remove();  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script><!-- comment #1 --><div class="test">  Hello World  <!-- comment #2 --></div>

Replace contents of HTML comments, but not the comments themselves

You could do replacements that reinserts the comments with the replacement text.
If you put the  and  inside matching groups you can reference them again and inset them again (with $1 & $2 being the start and end) while replacing the content inside.

const p = document.getElementById('content').innerHTML;
const replacement = 'new content';

console.log(p.replace(/(<!-- START COMMENT -->)[\s\S]*?(<!-- END COMMENT -->)/, `$1${replacement}$2`));

<div id="content">
hello this is my file

<!-- START COMMENT -->
some
content
here
<!-- END COMMENT -->

the rest of the file
</div>

How do I get an HTML comment with javascript

Using a NodeIterator (IE >= 9)

The best method is to use a dedicated NodeIterator instance iterating all comments contained in a given root element.

See it in action!

function filterNone() {
    return NodeFilter.FILTER_ACCEPT;
}

function getAllComments(rootElem) {
    var comments = [];
    // Fourth argument, which is actually obsolete according to the DOM4 standard, is required in IE 11
    var iterator = document.createNodeIterator(rootElem, NodeFilter.SHOW_COMMENT, filterNone, false);
    var curNode;
    while (curNode = iterator.nextNode()) {
        comments.push(curNode.nodeValue);
    }
    return comments;
}

window.addEventListener("load", function() {
    console.log(getAllComments(document.body));
});

Using a custom-made DOM traversal (to support IE < 9 as well)

If you have to support older browsers (e.g. IE <9), you need to traverse the DOM yourself and extract those elements whose node type is Node.COMMENT_NODE.

See it in action!

// Thanks to Yoshi for the hint!
// Polyfill for IE < 9
if (!Node) {
    var Node = {};
}
if (!Node.COMMENT_NODE) {
    // numeric value according to the DOM spec
    Node.COMMENT_NODE = 8;
}

function getComments(elem) {
  var children = elem.childNodes;
  var comments = [];

  for (var i=0, len=children.length; i<len; i++) {
    if (children[i].nodeType == Node.COMMENT_NODE) {
      comments.push(children[i]);
    }
  }
  return comments;
}

Extracting a node's contents and delete it

Independent of the way you choose from above, you receive the same node DOM objects.

Accessing a comment's contents is as easy as commentObject.nodeValue.

Deleting a comment is a bit more verbose: commentObject.parentNode.removeChild(commentObject)

HTML Comments in a JavaScript Block