编写一个 javascript 函数来显示 html 中使用的所有标签

📌 相关文章

📜 编写一个 javascript 函数来显示 html 中使用的所有标签 - Javascript (1)

📅 最后修改于: 2023-12-03 15:41:19.049000 🧑 作者: Mango

当开发网站时，您可能想知道网站中使用了哪些 HTML 标记。为此，您可以编写一个 Javascript 函数来显示 HTML 中使用的所有标签。下面是一个示例函数：

/**
 * 显示 HTML 中使用的所有标签
 * @param {string} html - 需要解析的 HTML 代码
 * @returns {string} - 返回所有标签的列表
 */
function getAllTags(html) {
  const pattern = /<\/*[a-zA-Z]+( |>)/g;
  const matches = html.match(pattern);
  const uniqueMatches = [...new Set(matches)];
  
  return `以下是 HTML 中使用的所有标签列表：\n\n${uniqueMatches.join("\n")}`;
}

该函数接受一个 HTML 字符串作为参数，并返回一个包含所有 HTML 标签的列表。该函数使用正则表达式搜索 HTML 标记，并使用“Set”数据结构确保没有重复的标记。最终返回字符串包含标签列表。

例如，假设我们有以下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例网站</title>
  </head>
  <body>
    <h1>欢迎来到示例网站！</h1>
    <p>这里是一个示例文本段落。</p>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>
    <a href="https://www.example.com">示例链接</a>
  </body>
</html>

调用getAllTags函数：

const html = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例网站</title>
  </head>
  <body>
    <h1>欢迎来到示例网站！</h1>
    <p>这里是一个示例文本段落。</p>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>
    <a href="https://www.example.com">示例链接</a>
  </body>
</html>`;

const tags = getAllTags(html);
console.log(tags);

将显示以下输出：

以下是 HTML 中使用的所有标签列表：

<!DOCTYPE>
<html>
<head>
<meta>
<title>
<body>
<h1>
<p>
<ul>
<li>
<a>

因为这个函数是非常简单的，尽管它能满足我们的需求，但有一些情况并不能准确的解析标签，或者是不包含特有属性和闭合方式。所以需要更强大的正则表达式或专业的 HTML 解析库来更准确的解析所有 HTML 标记。