innerHTML不尊重缩进

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

您是否知道在填充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!"); } }

感谢

来源

2011-11-01 Masiar

大多数情况下，输出这样的代码，你会想把它包装在<pre>和<code>标签中。

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

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

来源

2011-11-01 21:45:41

哇，很酷！从我+1。 – thejh

更换\n与<br>。您可能知道，换行符不会像HTML一样显示，但会被视为空格。

来源

2011-11-01 21:44:45 GolezTrol

试试这个：

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

在HTML，换行符被忽略，你必须使用<br>换行。

来源

2011-11-01 21:44:50 thejh

innerHTML尊重缩进。问题在于HTML本身如何表示数据：它将所有空格显示为单个空格。替换\n与<br>只是一个部分解决方案，因为选项卡不会被保存。在你的CSS中更好地使用#myDiv { white-space: pre; }。

来源

2011-11-01 21:45:50 duri

innerHTML不尊重缩进

回答

相关问题