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

在本文中，我们将学习如何使用JavaScript获取HTML注释的内容。注释是编程和软件开发中的最佳实践。通常，它们可以解释为什么要做某个编码决策或者如何改进正在编写的代码。

HTML标签（包括HTML注释）在DOM树中表示为节点，每个节点具有一个nodeType属性，它是一个数字值，用于标识节点的类型。childNodes属性返回一个包含节点的子节点的nodeList对象。注释和空白也被认为是节点。这些节点具有从0开始的索引号。可以使用索引号对节点列表进行搜索和排序操作。

使用Array.from()方法
使用replace()方法
语法

<! -- Comments here -->

使用数组的 Array.from() 方法： JavaScript 的 Array from() 方法可以从任何有 length 属性或可以迭代的对象中返回一个数组对象。

示例 1： 在这个示例中，我们使用了 array.from() 方法 ，代码创建了一个包含注释和段落的 div 元素。它从 div 中提取注释文本，并使用 querySelector 和 childNodes 将它显示为一个带有 ID “content” 的 h1 元素。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>GeeksforGeeks</title> 
    <style> 
        #content { 
            color: green; 
            font-weight: bold; 
            font-size: 2.3rem; 
            margin: 2rem; 
        } 
  
        p { 
  
            color: rgb(32, 29, 29); 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <!-- Welcome To Geeksforgeeks -->
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought and 
            well explained computer 
            science and programming articles 
        </p> 
    </div> 
    <script> 
        const comment = 
            Array.from(document.querySelector('div').childNodes) 
                .find(node => node.nodeType === Node.COMMENT_NODE 
                    && node.textContent.trim()); 
        document.write 
            (`<h1 id="content"> 
                ${comment ? comment.textContent.trim() : ''}</h1>`); 
    </script> 
</body> 
</html>

输出：

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

使用replace()方法：

replace()方法 在JavaScript中用于搜索字符串中的值或任何表达式，并用参数中提供的新值替换它。

例子2： 在这个例子中，JavaScript代码从HTML注释中提取文本以动态更新标题，显示“欢迎来到Geekforgeeks”。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Geeksforgeeks</title> 
</head> 
<style> 
    div { 
        color: green; 
    } 
</style> 
  
<body> 
    <div> 
        <!-- Welcome To Geeksforgeeks -->
    </div> 
    <p> 
        Geeksforgeeks is a computer science portal 
    </p> 
    <script> 
        let htmlContent = document.body.innerHTML; 
        let commentRegex = '/<!--([\s\S]*?)-->/'; 
        // Extract the content of the HTML comment 
        let commentContent = 
            htmlContent.replace(commentRegex, function (match, group) { 
                return group.trim(); 
                // Trim any leading/trailing whitespace 
            }); 
        let modifiedHtmlContent = 
            htmlContent.replace(commentRegex, '<h1>$1</h1>'); 
        document.body.innerHTML = modifiedHtmlContent; 
    </script> 
</body> 
</html>