如何在 JavaScript 中格式化/整理/美化 HTML?我尝试搜索/替换尖括号 ( <
, >
) 并相应地缩进。但是当然它没有考虑 HTML 中的 JS 或 CSS 等。
我想这样做的原因是我制作了一个内容编辑器(CMS),它具有所见即所得和源代码视图。WYSIWYG 编辑器编写的代码的问题通常是单行。所以我想要一个可以根据需要将其格式化为更易读的形式的 JavaScript。
这是我到目前为止所拥有的:
function getIndent(level) {
var result = '',
i = level * 4;
if (level < 0) {
throw "Level is below 0";
}
while (i--) {
result += ' ';
}
return result;
}
function style_html(html) {
html = html.trim();
var result = '',
indentLevel = 0,
tokens = html.split(/</);
for (var i = 0, l = tokens.length; i < l; i++) {
var parts = tokens[i].split(/>/);
if (parts.length === 2) {
if (tokens[i][0] === '/') {
indentLevel--;
}
result += getIndent(indentLevel);
if (tokens[i][0] !== '/') {
indentLevel++;
}
if (i > 0) {
result += '<';
}
result += parts[0].trim() + ">\n";
if (parts[1].trim() !== '') {
result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";
}
if (parts[0].match(/^(img|hr|br)/)) {
indentLevel--;
}
} else {
result += getIndent(indentLevel) + parts[0] + "\n";
}
}
return result;
}