怎么用js格式化html代码

使用JavaScript格式化HTML代码的最佳方法包括利用正则表达式、使用第三方库、创建自定义函数。以下是对其中“使用第三方库”的详细描述：使用第三方库是最简单且高效的方法，许多库已经为格式化HTML提供了完美的解决方案，它们不仅能处理复杂的HTML结构，还能提供更多的配置选项来满足不同需求。

一、使用正则表达式

1、简单正则表达式匹配和替换

正则表达式是一种强大的文本匹配和替换工具，可以用来对HTML代码进行简单的格式化。以下示例展示了如何使用JavaScript中的正则表达式来添加缩进和换行，从而使HTML代码更加整齐。

function formatHTML(html) {
    var formatted = '';
    var reg = /(>)(<)(/*)/g;
    html = html.replace(reg, '$1rn$2$3');
    var pad = 0;
    jQuery.each(html.split('rn'), function(index, node) {
        var indent = 0;
        if (node.match(/.+</w[^>]*>$/)) {
            indent = 0;
        } else if (node.match(/^</w/)) {
            if (pad !== 0) {
                pad -= 1;
            }
        } else if (node.match(/^<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的处理

对于更复杂的HTML结构，简单的正则表达式可能不足以应对。这时，可以结合DOM解析和正则表达式来实现更精细的格式化。

二、使用第三方库

1、介绍第三方库

使用第三方库是最简单且高效的方法，许多库已经为格式化HTML提供了完美的解决方案，它们不仅能处理复杂的HTML结构，还能提供更多的配置选项来满足不同需求。以下是一些常用的第三方库：

js-beautify：一个非常流行的JavaScript库，支持HTML、CSS和JavaScript的格式化。
Pretty Diff：一个功能强大的差异比较和格式化工具，支持多种编程语言。
html-minifier：虽然主要用于HTML压缩，但也提供了格式化功能。

2、使用js-beautify库

js-beautify是一个流行的库，支持格式化HTML、CSS和JavaScript代码。可以通过npm安装并使用它来格式化HTML代码。

npm install js-beautify

安装完成后，可以在JavaScript代码中使用它：

const beautify = require('js-beautify').html;
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
let options = {
    indent_size: 2,
    space_in_empty_paren: true
};
let formattedHTML = beautify(html, options);
console.log(formattedHTML);

3、Pretty Diff库的使用

Pretty Diff是另一个强大的工具，支持多种编程语言的格式化。以下是如何使用Pretty Diff来格式化HTML代码：

const prettydiff = require("prettydiff");
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
let options = {
    source: html,
    lang: "html",
    mode: "beautify"
};
let formattedHTML = prettydiff(options);
console.log(formattedHTML);

三、创建自定义函数

1、基础自定义函数

对于特定的需求，可以编写自定义函数来格式化HTML代码。以下示例展示了如何创建一个简单的格式化函数：

function formatHTML(html) {
    let formatted = '';
    let pad = 0;
    let indent = '  ';
    html.split(/>s*</).forEach(function(node) {
        if (node.match(/^/w/)) pad -= 1;
        formatted += new Array(pad + 1).join(indent) + '<' + node + '>n';
        if (node.match(/^<?w[^>]*[^/]$/)) pad += 1;
    });
    return formatted;
}
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
console.log(formatHTML(html));

2、处理嵌套结构

对于更复杂的嵌套结构，可以在自定义函数中加入更多的逻辑，以确保正确处理所有的HTML元素和属性。

function formatHTML(html) {
    let formatted = '';
    let pad = 0;
    let indent = '  ';
    let nodes = html.split(/(<[^>]+>)/).filter(e => e.trim());
    nodes.forEach(function(node) {
        if (node.match(/^</w/)) pad -= 1;
        formatted += new Array(pad + 1).join(indent) + node + 'n';
        if (node.match(/^<w([^>]*[^/])?>/)) pad += 1;
    });
    return formatted;
}
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
console.log(formatHTML(html));

四、使用DOM解析器

1、浏览器环境中的DOM解析器

在浏览器环境中，可以使用DOM解析器来解析和格式化HTML代码。以下示例展示了如何使用浏览器的DOM解析器来格式化HTML代码：

function formatHTML(html) {
    let doc = new DOMParser().parseFromString(html, 'text/html');
    let formatted = new XMLSerializer().serializeToString(doc);
    return formatted.replace(/></g, '>n<');
}
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
console.log(formatHTML(html));

2、使用Node.js中的DOM解析器

在Node.js环境中，可以使用诸如jsdom等库来解析和格式化HTML代码：

const jsdom = require('jsdom');
const { JSDOM } = jsdom;
function formatHTML(html) {
    let dom = new JSDOM(html);
    let serialized = dom.serialize();
    return serialized.replace(/></g, '>n<');
}
let html = '<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>';
console.log(formatHTML(html));

五、结论

使用JavaScript格式化HTML代码有多种方法，每种方法都有其优缺点。使用第三方库，如js-beautify，是最简单且高效的方法，特别是对于复杂的HTML结构。正则表达式和自定义函数适用于简单的场景，而DOM解析器则提供了更多的灵活性和准确性。根据具体需求选择合适的方法，可以显著提高代码的可读性和维护性。