Question

我在客户端有一个代码，它通过带有node.js后端的socket.io接收一些数据。我收到一些缩进数据（这是一些字符串格式的代码）。我可以提醒代码，我看到它在警报中缩进，但当我document.getElementById('myDiv').innerHTML = receivedData.indentedData时，myDiv中输出的数据不是缩进的，而只是在一行中。

在填充HTML元素时，您是否知道在某些字符串中使用缩进的方法？

为了更准确，我以这种形式提醒数据：

class Motto {
  public static void main(String[] args) {
    System.out.println("Java rules!");
  }
}

但我在myDiv中看到的是：

class Motto { public static void main(String[] args) { System.out.println("Java rules!"); } }

由于

Answer 1

大多数情况下，输出这样的代码，您需要将其包含在<pre>和<code>标记中。

document.getElementById('myDiv').innerHTML = "<pre><code>"+receivedData.indentedData+"</code></pre>";

这就是StackOverflow降价编辑器为代码片段所做的工作。

Answer 2

innerHTML尊重缩进。问题在于HTML本身如何表示数据：它将所有空白显示为单个空格。用\n替换<br>只是部分解决方案，因为仍无法保存标签。最好在CSS中使用#myDiv { white-space: pre; }。

Answer 3

将\n替换为<br>。如您所知，换行符不会在HTML中显示，但会被视为空格。

Answer 4

试试这个：

document.getElementById('myDiv').innerHTML =
    receivedData.indentedData.replace(/\n/g, '<br>');

在HTML中，会忽略换行符，您必须使用<br>换行。

innerHTML不尊重缩进

4 个答案: