如何使用 JavaScript 获取 HTML 注释的内容

javascripthtmlweb developmentfront end technology

任何 Web 浏览器都会忽略注释(一段代码)。最佳做法是将注释添加到 HTML 代码中，尤其是对于复杂的出版物，以便查看代码的任何人都可以轻松识别页面的各个部分和任何额外的注释。注释使您和其他用户更容易阅读和理解您的代码。

在<! —... --> 标签之间放置 HTML 注释。因此，浏览器会将<!—... --> 标签中包含的任何内容视为注释，并且不会对其执行任何操作。

语法

以下是注释的语法 -

<! -- 此处注释 -->

让我们看看下面的例子，以便更好地理解如何使用 JavaScript 获取 HTML 注释的内容。

示例

在下面的例子中，我们运行一个脚本来在网页上显示注释中的内容。

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

脚本执行时，将生成一个输出，其中包含用作评论内容的网页上的文本。

在 JavaScript 中使用 replace()

replace() 方法在字符串中查找值或正则表达式。replace() 方法的结果是一个具有替换值的新字符串。原始字符串不会因 replace() 技术而改变。

语法

以下是 replace() 的语法 -

string.replace(searchValue, newValue)

示例

考虑以下示例，其中我们使用 replace() 来显示评论的内容。

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

运行上述脚本后，将弹出输出窗口，显示文本以及网页上评论的内容。

示例

执行以下代码，使用 replace() 获取 HTML 注释的内容。

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

当脚本执行时，它将生成一个输出，该输出由从 HTML 注释内容中获取的网页上显示的文本组成。