统计一个页面用到的html,css,js

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计html</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            background: #0b1b2c;
        }

        #app {
            display: flex;
        }

        #textareaCount {
            margin: 5px 100px;
        }

        div {
            color: aliceblue;
        }

        div li {
            list-style: none;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <textarea id="textareaCount" class="textarea1" name="textareaCSS" rows="8" cols="50"
            placeholder="在这里输入HTML内容"></textarea>
        <dl>
            <dt id="countHTML">HTML标签数量:0。</dt>
            <dt>用到的标签有:</dt>
            <dd id="appHTML"></dd>
        </dl>
        <dl>
            <dt id="countCSS">CSS属性数量: 0。</dt>
            <dt>用到的属性有:</dt>
            <dd id="appCSS"></dd>
            
        </dl>
        <dl>
            <dt id="countJS">JS函数和变量数量: 0。</dt>
            <dt>用到的函数和变量有:</dt>
            <dd id="appJS"></dd>
        </dl>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('textareaCount').addEventListener('input', function () {
                const textareaCount = this.value;

                // 正则表达式匹配所有 HTML 标签
                const tagRegex = /<(\w+)[^>]*>/g;
                const htmlTags = textareaCount.match(tagRegex) || [];
              console.log(htmlTags);
                document.getElementById('countHTML').innerText = `HTML标签数量: ${htmlTags.length}。`;

                const tags = [];

                let match;
                while ((match = tagRegex.exec(textareaCount)) !== null) {
                    tags.push(match[1]);
                }

                // 将数组去重并排序
                const tagList = Array.from(new Set(tags)).sort();

                const appHTML = document.getElementById('appHTML');
                const ulHTML = document.createElement('ul');
                appHTML.innerHTML = ''; // 清空之前的列表
                appHTML.appendChild(ulHTML);

                tagList.forEach((tag, index) => {
                    const li = document.createElement('li');
                    li.textContent = `${index + 1}. ${tag}`;
                    ulHTML.appendChild(li);
                });

                // 正则表达式匹配所有 CSS 属性
                const propertyRegex = /([a-zA-Z-]+)\s*:/g;
                const cssProperties = textareaCount.match(propertyRegex) || [];
                document.getElementById('countCSS').innerText = `CSS属性数量: ${cssProperties.length}。`;
                const properties = [];

                while ((match = propertyRegex.exec(textareaCount)) !== null) {
                    properties.push(match[1]);
                }

                // 将数组去重并排序
                const propertyList = Array.from(new Set(properties)).sort();

                const appCSS = document.getElementById('appCSS');
                const ulCSS = document.createElement('ul');
                appCSS.innerHTML = ''; // 清空之前的列表
                appCSS.appendChild(ulCSS);

                propertyList.forEach((property, index) => {
                    const li = document.createElement('li');
                    li.textContent = `${index + 1}. ${property}`;
                    ulCSS.appendChild(li);
                });
                console.log(properties);

                // 正则表达式匹配所有 JS 关键字
                const jsWordRegex = /(function\s+\w+|var\s+\w+|let\s+\w+|const\s+\w+)/g;
                const jsFunctions = textareaCount.match(jsWordRegex) || [];
                document.getElementById('countJS').innerText = `JS函数和变量数量: ${jsFunctions.length}。`;

                const jsWords = [];

                while ((match = jsWordRegex.exec(textareaCount)) !== null) {
                    jsWords.push(match[0]);
                }

                // 将数组去重并排序
                const sortedJsWords = Array.from(new Set(jsWords)).sort();
                console.log(sortedJsWords);

                const appJS = document.getElementById('appJS');
                const ulJS = document.createElement('ul');
                appJS.innerHTML = ''; // 清空之前的列表
                appJS.appendChild(ulJS);

                sortedJsWords.forEach((word, index) => {
                    const li = document.createElement('li');
                    li.textContent = `${index + 1}. ${word}`;
                    ulJS.appendChild(li);
                });
            });
        });
    </script>
</body>

</html>