首页 > 文章列表 > 如何使用JavaScript获取HTML注释的内容

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

JavaScript获取HTML注释的内容
473 2023-09-17

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

中间 标签、HTML 注释都放置了。因此,浏览器会将 标签中包含的任何内容视为注释,并且不会对其进行任何操作。

语法

以下是注释的语法 -

<! -- Comments here -->

让我们来看一下以下示例,以更好地理解如何使用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 注释内容获取的网页上显示的文本。