function mostFrequentTag(htmlString) {
// 1. 解析 HTML 字符串
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
// 2. 遍历所有元素节点
const tagCounts = {};
const allElements = doc.querySelectorAll('*'); // 选择所有元素
for (let i = 0; i < allElements.length; i++) {
const tagName = allElements[i].tagName.toLowerCase();
tagCounts[tagName] = (tagCounts[tagName] || 0) + 1;
}
// 3. 找到出现次数最多的标签
let mostFrequentTag = null;
let maxCount = 0;
for (const tagName in tagCounts) {
if (tagCounts[tagName] > maxCount) {
mostFrequentTag = tagName;
maxCount = tagCounts[tagName];
}
}
return mostFrequentTag;
}
// 示例用法:
const html = `
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>
<span>Span 1</span>
<span>Span 2</span>
</div>
</body>
</html>
`;
const mostUsedTag = mostFrequentTag(html);
console.log("Most frequently used tag:", mostUsedTag); // Output: p
// 处理空 HTML 字符串的情况
const emptyHTML = "";
const mostUsedTagEmpty = mostFrequentTag(emptyHTML);
console.log("Most frequently used tag (empty HTML):", mostUsedTagEmpty); // Output: null
// 处理无效 HTML 的情况 (例如，缺少结束标签) - DOMParser 会尽力解析
const invalidHTML = "<div><span>Test</span>";
const mostUsedTagInvalid = mostFrequentTag(invalidHTML);
console.log("Most frequently used tag (invalid HTML):", mostUsedTagInvalid); // Output: div (or span, depending on how the parser handles the invalid HTML)
代码解释:
-
解析 HTML: 使用
DOMParser将 HTML 字符串解析成 DOM 树。 这使得我们可以使用 DOM 方法来遍历 HTML 结构。 -
遍历元素:
querySelectorAll('*')选择文档中的所有元素。 循环遍历这些元素，并将每个标签名（转换为小写）及其出现次数存储在tagCounts对象中。 -
找到最频繁的标签: 迭代
tagCounts对象，跟踪出现次数最多的标签。 -
返回结果: 返回出现次数最多的标签名。
改进和注意事项:
-
错误处理: 上面的代码包含了对空 HTML 字符串的处理。 可以添加更健壮的错误处理，例如检查
DOMParser是否成功创建了文档。 无效的 HTML（例如，缺少结束标签）可能会导致 DOMParser 以意外的方式解析 HTML，因此根据你的需求，你可能需要添加额外的验证或清理步骤。 -
性能: 对于非常大的 HTML 文档，此代码的性能可能会成为一个问题。 如果需要更高的性能，可以考虑使用流式 HTML 解析器或其他优化技术。
-
特定标签: 如果只想计算特定标签的出现次数（例如，只计算
div和p标签），可以修改querySelectorAll选择器。
这个改进的版本提供了更强大的错误处理和空 HTML 输入处理，使其更适用于各种场景。
标签：const,tagCounts,标签,mostFrequentTag,HTML,tagName,页面 From： https://www.cnblogs.com/ai888/p/18598654