js 如何美化html代码

使用JavaScript美化HTML代码的几种方法包括：使用代码高亮库、创建自定义格式化函数、使用在线工具。其中，使用代码高亮库是一种非常高效且易于实现的方式。通过使用现成的库如Highlight.js，你可以快速实现HTML代码的美化和高亮效果。接下来，我们将详细探讨如何利用这些方法美化HTML代码。

一、使用代码高亮库

1、选择合适的代码高亮库

在众多代码高亮库中，Highlight.js 和 Prism.js 是两种非常流行且强大的工具。它们支持多种编程语言和主题，使用简单，效果显著。

Highlight.js

Highlight.js 是一个轻量级的语法高亮库，支持多种编程语言和主题。只需简单地引入库文件，即可在网页上实现代码高亮效果。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
  <script>hljs.highlightAll();</script>
</head>
<body>
  <pre><code class="html"> 
    <!-- Your HTML code goes here -->
  </code></pre>
</body>
</html>

Prism.js

Prism.js 是另一种流行的代码高亮库，它不仅支持多种编程语言，还支持插件扩展功能，如行号显示和代码折叠。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
</head>
<body>
  <pre><code class="language-html">
    <!-- Your HTML code goes here -->
  </code></pre>
</body>
</html>

2、引入库文件和样式

无论选择哪种库，你都需要在HTML文件中引入相应的CSS和JS文件。可以通过CDN方式引入，也可以下载到本地进行引用。

3、添加代码块和高亮类

在需要高亮的代码块中，使用 <pre> 和 <code> 标签包裹代码，并添加相应的类名，如 class="html" 或 class="language-html"。

二、创建自定义格式化函数

1、编写格式化函数

你可以通过编写自定义JavaScript函数来实现HTML代码的格式化。以下是一个简单的示例：

function formatHTML(html) {
  var formatted = '';
  var reg = /(>)(<)(/*)/g;
  html = html.replace(reg, '$1rn$2$3');
  var pad = 0;
  html.split('rn').forEach(function (node, index) {
    var indent = 0;
    if (node.match(/.+</w[^>]*>$/)) {
      indent = 0;
    } else if (node.match(/^</w/)) {
      if (pad !== 0) {
        pad -= 1;
      }
    } else if (node.match(/^<w([^>]*[^/])?>(?!</w)/)) {
      indent = 1;
    } else {
      indent = 0;
    }
    var padding = '';
    for (var i = 0; i < pad; i++) {
      padding += '  ';
    }
    formatted += padding + node + 'rn';
    pad += indent;
  });
  return formatted;
}

2、应用格式化函数

将HTML代码作为字符串传递给格式化函数，并将返回的格式化代码插入到页面中。

<!DOCTYPE html>
<html>
<head>
  <style>
    pre { background-color: #f4f4f4; padding: 10px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <pre id="formattedHTML"></pre>
  <script>
    var html = '<div><h1>Title</h1><p>Paragraph</p></div>';
    var formattedHTML = formatHTML(html);
    document.getElementById('formattedHTML').innerText = formattedHTML;
  </script>
</body>
</html>

三、使用在线工具

1、选择合适的在线工具

有许多在线工具可以帮助你格式化和美化HTML代码，如 BeautifyTools、FreeFormatter 和 HTML Formatter。你只需将HTML代码粘贴到工具中，即可获得格式化后的代码。

2、集成在线工具到项目中

某些在线工具提供API，你可以通过JavaScript调用这些API来实现自动化格式化。例如，使用 BeautifyTools 的 API：

function beautifyHTML(html) {
  fetch('https://www.beautifytools.com/html-beautifier.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `html=${encodeURIComponent(html)}`
  })
  .then(response => response.text())
  .then(data => {
    document.getElementById('formattedHTML').innerText = data;
  });
}
var html = '<div><h1>Title</h1><p>Paragraph</p></div>';
beautifyHTML(html);

3、保存和导出格式化后的代码

将格式化后的HTML代码保存到本地文件或导出为下载链接，便于后续使用和查看。

四、结合多种方法实现最佳效果

1、结合高亮库和格式化函数

你可以将代码高亮库和自定义格式化函数结合使用，以获得更好的效果。先通过自定义函数格式化HTML代码，再通过高亮库实现代码高亮。

2、集成在线工具和本地工具

在项目开发过程中，结合使用在线工具和本地工具，以满足不同的需求和场景。例如，在开发环境中使用自定义函数进行格式化，在生产环境中使用在线工具进行代码检查和优化。

3、使用项目管理系统进行代码管理

在团队开发中，推荐使用研发项目管理系统PingCode 或 通用项目协作软件Worktile进行代码管理和协作。这些系统不仅可以帮助团队进行代码版本管理，还可以实现代码审查和质量控制。

通过上述方法，你可以有效地美化和格式化HTML代码，提高代码的可读性和维护性。在实际应用中，根据具体需求选择合适的方法和工具，以实现最佳效果。