Javascript：如何更正 HTML 字符串中的缩进？

Javascript: How to correct indentation in HTML string?

提问by Misha Moroshko

Given a string like this:

给定一个这样的字符串：

' \n <div id="a">\n <span class="b">\n<span>Hello</span>\n\n\n</span> <input type="text">\n  \n</div>\n '

I'd like to format it like this:

我想这样格式化：

<div id="a">
  <span class="b">
    <span>Hello</span>
  </span>
  <input type="text">
</div>

i.e. the result should be: (assume 2 spaces for indentation)

即结果应该是：（假设缩进2个空格）

'<div id="a">\n  <span class="b">\n    <span>\n      Hello\n    </span>\n  </span>\n  <input type="text">\n</div>'

What's the most elegant way to achieve this? Are there any known libraries that do that?

实现这一目标的最优雅的方法是什么？是否有任何已知的图书馆可以做到这一点？

Note:

笔记：

• I'm not looking for HTML syntax highlighting, just indentation correction
• I'm not looking to support the whole HTML spec, correcting basic HTML like the example above would suffice

• 我不是在寻找 HTML 语法突出显示，只是缩进更正
• 我不打算支持整个 HTML 规范，像上面的例子一样纠正基本的 HTML 就足够了

回答by dfsq

Here is a simple recursive function I wrote, which I think might help you to achieve what you are after.

这是我写的一个简单的递归函数，我认为它可以帮助您实现您所追求的目标。

function process(str) {

    var div = document.createElement('div');
    div.innerHTML = str.trim();

    return format(div, 0).innerHTML;
}

function format(node, level) {

    var indentBefore = new Array(level++ + 1).join('  '),
        indentAfter  = new Array(level - 1).join('  '),
        textNode;

    for (var i = 0; i < node.children.length; i++) {

        textNode = document.createTextNode('\n' + indentBefore);
        node.insertBefore(textNode, node.children[i]);

        format(node.children[i], level);

        if (node.lastElementChild == node.children[i]) {
            textNode = document.createTextNode('\n' + indentAfter);
            node.appendChild(textNode);
        }
    }

    return node;
}

Then you would use it like this:

然后你会像这样使用它：

process(str);

Here is a demo:

这是一个演示：

var str = '<div id="a"><span class="b"><span>Hello</span></span><input type="text"><p><b>b <i>italic</i></b></p></div>';

function process(str) {
  var div = document.createElement('div');
  div.innerHTML = str.trim();

  return format(div, 0).innerHTML;
}

function format(node, level) {
  var indentBefore = new Array(level++ + 1).join('  '),
    indentAfter = new Array(level - 1).join('  '),
    textNode;

  for (var i = 0; i < node.children.length; i++) {
    textNode = document.createTextNode('\n' + indentBefore);
    node.insertBefore(textNode, node.children[i]);

    format(node.children[i], level);

    if (node.lastElementChild == node.children[i]) {
      textNode = document.createTextNode('\n' + indentAfter);
      node.appendChild(textNode);
    }
  }

  return node;
}

document.querySelector('#out').innerText = process(str);

<pre id="out"></pre>

Demo: http://jsfiddle.net/1gf07wap/

演示：http: //jsfiddle.net/1gf07wap/

回答by parchment

The js-beautifytool can work with html, and has an api. It's probably the easiest way to do what you want.

该JS-美化工具可以用HTML工作，并有一个API。这可能是做你想做的最简单的方法。

After installing it with node:

使用节点安装后：

var beautify_html = require('js-beautify').html;

result = beautify_html(htmlstring);

To use it in a browser, you need to include all the beautify*.js scripts in this directoryand use window.html_beautify.

要在浏览器中使用它，您需要在此目录中包含所有 beautify*.js 脚本并使用window.html_beautify.

DEMO

演示

回答by rafaelcastrocouto

Since there are lots of complains about js-beautify, I'm posting this alternative:

由于有很多关于 js-beautify 的抱怨，我发布了这个替代方案：

GIT: https://github.com/maxogden/commonjs-html-prettyprinter

GIT：https: //github.com/maxogden/commonjs-html-prettyprinter

DEMO: http://requirebin.com/?gist=45056f6a9b306a14ea3d

演示：http://requirebin.com/?gist= 45056f6a9b306a14ea3d

CODE:

代码：

var htmlmodule = require('html');
var str = ' \n <div id="a">\n <span class="b"><span>Hello</span></span><input type="text">\n  \n</div>\n ';
var pretty = htmlmodule.prettyPrint(str);

IF this does not work as you intend to, I recommend parsing the HTML string... for this job you can use this xmldomparseFromString... it's really simple.

如果这不符合您的预期，我建议您解析 HTML 字符串...对于这项工作，您可以使用此xmldomparseFromString... 这真的很简单。