Как получить содержимое HTML-комментария с помощью JavaScript?

Как стать разработчиком JavaScript Программирование и разработка

В этой статье мы узнаем, как получить содержимое комментария HTML с помощью Javascript. Комментарии — это лучшая практика в программировании и разработке программного обеспечения. В общем, они могут объяснить, почему было принято решение о написании кода или что нужно сделать, чтобы улучшить код, над которым вы работаете.

Теги HTML (включая комментарии HTML) представлены в дереве DOM в виде узлов, причем каждый узел имеет свойство nodeType, представляющее собой числовое значение, определяющее тип узла. Свойство childNodes возвращает объект nodeList, содержащий дочерние узлы узла. Комментарии и пробелы также считаются узлами. Узлам присваиваются порядковые номера, начинающиеся с 0. Операции поиска и сортировки в списке узлов могут выполняться с использованием порядкового номера.

  • Использование метода Array.from()
  • Использование метода replace()

Синтаксис

<! -- Comments here -->

Подходы: Использование метода Array.from(). Метод JavaScript Array from() возвращает объект Array из любого объекта со свойством длины или итерируемого объекта.

Пример 1. В этом примере мы используем метод array.from(). Код создает элемент div с комментарием и абзацем. Он извлекает текст комментария из div и отображает его как элемент h1 с идентификатором «content» с помощью querySelector и childNodes.

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>

Выход:

Как получить содержимое HTML-комментария с помощью JavaScript

Как получить содержимое HTML-комментария с помощью JavaScript

Использование метода 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>

Выход:

Как-получить-содержимое-HTML-коммен

Как получить содержимое HTML-комментария с помощью JavaScript

Читайте также:  Как подключить и выполнить SQL-запросы к базе данных PostgreSQL из Python?
Оцените статью
bestprogrammer.ru
Добавить комментарий