<!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>
