How to Get the Content of an HTML Comment Using JavaScript


Any web browser ignores a comment, which is a piece of code. It's best practice to add comments to your HTML code, especially for complicated publications, so that anyone looking at the code can easily identify sections of the page and any extra notes. Comments make your code easier to read and understand for you and other users.

In between<! —... --> tags, HTML comments are placed. Therefore, the browser will regard any content included in<!—... --> tags as a comment and will do nothing with it.

Syntax

Following is the syntax for comment -

<! -- Comments here -->

Let’s look into the following examples for getting better understanding on how to get the content of an HTML comment using JavaScript.

Example

In the following example, we are running a script to display the content inside the comments on the webpage.

<!DOCTYPE html>
<html>
   <body>
      <p id="tutorial"></p>
      <p id="tutorial1"></p>
      <script>
         function showtext(comment) {
            return comment
            .replaceAll("<!--", "")
            .replaceAll("-->", "")
         }
         document.getElementById("tutorial").innerHTML=(showtext("<!--Welcome-->"));
         document.getElementById("tutorial1").innerHTML=(showtext("<!--Tutorials <!--Point-->"));
      </script>
   </body>
</html>

When the script gets executed, it will generate an output consisting of text on the webpage that was used as content in comments.

Using replace() in JavaScript

The replace() method looks up a value or regular expression in a string. A new string with the replaced value(s) is the result of the replace() method. The original string is unchanged by the replace() technique.

Syntax

Following is the syntax for replace() -

string.replace(searchValue, newValue)

Example

Consider the following example, where we are using replace() to display the content of comments.

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ">
      <h1>MSD</h1>
      <!--<div>VIRAT</div>-->
      <!--<div>ABD</div>-->
      <script>
         var body = document.getElementsByTagName('body')[0],
         bodyHtml = body.innerHTML;
         while (bodyHtml.indexOf("<!--") !== -1) {
            bodyHtml = bodyHtml.replace("<!--", "").replace("-->", "");
         }
         body.innerHTML = bodyHtml;
      </script>
   </body>
</html>

On running the above script, the output window will pop up, displaying the text along with the content of the comments on the webpage.

Example

Execute the below code for getting the content of the HTML comments by using replace().

<!DOCTYPE html>
<html>
   <body style="background-color:#D5F5E3">
      <p id="tutorial"></p>
      <p id="tutorial1"></p>
      <script>
         function getContent(comment) {
            return comment
            .replace(/<!--(.*?)-->/g, "$1");
         }
         document.getElementById("tutorial").innerHTML=(getContent("<!--ICC WorldCup-->"));
         document.getElementById("tutorial1").innerHTML=(getContent("<!--Indian Premier League-->"));
      </script>
   </body>
</html>

When the script gets executed, it will generate an output consisting of text displayed on the webpage that was obtained from the content of the HTML comments.

Updated on: 20-Apr-2023

444 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements