- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
330 Views
