在显示缩进的 HTML 中显示日志的更好方法是什么？答案

【问题标题】：What is the better way to show a log in HTML showing the indentation?在显示缩进的 HTML 中显示日志的更好方法是什么？
【发布时间】：2016-01-15 20:45:43
【问题描述】：

我有一个带有 gulp 任务的应用程序，在某个任务中我已经退休，就像一个安全包，当我使用 gulp 运行这个任务时，我得到一个这样的日志：

demo-mobile 1.1.5
  ↳ debowerify 1.3.1
    ↳ bower 1.3.12
      ↳ semver 2.3.2

我想将此日志保存为 html 格式但不可能，当我运行 gulp 时，它保存在 html div 中。

child.stdout.setEncoding('utf8');
 child.stdout.on('data', function (data) {
    console.log(data);
 logInfo+= data;
});

html 模板没有控制台那样的缩进。

demo-mobile-1.1.5-↳-debowerify-1.3.1-↳-bower-1.3.12-

有人知道如何解决此问题。

最好的问候。

【问题讨论】：

有效！当您的评论是我的答案时会发生什么？谁赢得了选票？
nycynik 似乎也有同样的答案，让他们赢吧； )。

标签： javascript html console gulp console.log

【解决方案1】：

嗯，可能有更好的方法，但是怎么样：

var input = "demo-mobile-1.1.5-↳-debowerify-1.3.1-↳-bower-1.3.12-";
var spaces = " ";
while (input.indexOf("-↳-") >0) {
	input = input.replace("-↳-", "<br>"+spaces+"↳");	
  spaces += " ";
}

// below is just to show the output.
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = input;

<div id="output" style="white-space: pre">


</div>

【讨论】：