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