【JS】JS实现HTML代码排版

admin · 发表于 2023-11-28 22:22:51

要实现更准确的HTML代码排版，建议使用成熟的HTML格式化库或工具，例如JS Beautifier、Prettier等。这些工具可以根据HTML语法规范对代码进行格式化，保证代码的对称性排版。
以下是一个使用JS Beautifier库的示例代码，展示如何在浏览器中对HTML代码进行格式化：
<!DOCTYPE html>
<html>
  <head>
<title>HTML代码排版</title>
<script src="https://cdn.jsdelivr.net/npm/js-beautify/js/lib/beautify-html.js"></script>
<script>
   function formatHTML() {
      var htmlTextarea = document.getElementById('htmlTextarea');
      var formattedTextarea = document.getElementById('formattedTextarea');

      // 使用JS Beautifier库对HTML代码进行格式化
      var formattedHTML = html_beautify(htmlTextarea.value);
      formattedTextarea.value = formattedHTML;
   }
</script>
  </head>
  <body>
<h1>HTML代码排版</h1>
<textarea id="htmlTextarea" rows="10" cols="80"></textarea>
<br>
<button onclick="formatHTML()">格式化</button>
<br>
<textarea id="formattedTextarea" rows="10" cols="80" readonly></textarea>
  </body>
</html>

		自动登录	找回密码
密码			立即注册