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


任何网页浏览器都会忽略注释,注释是一段代码。为 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 注释内容中获取的网页上显示的文本。

更新于:2023年4月20日

577 次查看

开启您的职业生涯

完成课程获得认证

开始学习
广告