fiddle

Question

我对来自Delphi的HTML，js相对较新。我已经回顾了以下答案，但它们似乎对我不起作用，或者我不理解他们的意思：

Multi line print
.innerHTML <br> breaking
html <br> and innerHTML problem

问题：我的所有文字都在一行打印，而不是换行。

以下是HTML源代码。

<!DOCTYPE HTML>
<html>
<head>
  <title>Test Module</title>
</head>
<body >
<p id="demo"></p>

<button id="btnRPCTest" onclick="RPCTest()">Test RPC call</button>
<p id="RPCTarget">(RPC output here...)</p>

<script id="broker" src="scripts/rpcbroker.js" type="text/javascript"></script>
<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("<br />\n");
    Div.innerHTML = text;
  }
</script>
</body>
</html>

上面，代码对服务器进行远程过程调用（RPC），结果被放入我创建的自定义TStringList对象中，其核心是一个字符串数组。

下面是将结果作为字符串返回的代码，由指定的参数ADelim消除。

function Broker_ResultsDelim(ADelim) {
  return TStringList.GetTextDelim(RPCBrokerV.Results, ADelim);
}

下面，字符串数组应该连接成一个包含换行符的长字符串。

GetTextDelim: function (Self, ADelim) {
  return (Self.FData).join(ADelim) + ADelim;
},

当我运行此代码并使用Chrome开发人员控制台逐步执行此代码时，我可以在控制台中键入“text”，并且换行符正确无误。

> text
"

 ...............................................................
 .................#.............................................
 ...###############.......##############..........########......
 .################......################........####...####.....
 .##.....####..........##....####.....###......##.......####....
 .###....###...##............###......##......##................
 ..##....#######.............###.....###.....###................
 .......###..##.............##########.......###....#########...
 .......###.................###...............##........###.....
 .......###.................###...............###......####.....
 ......###.................###.................####....###......
 ...###########........############.............##########......
 ......................................................###......
 ................................................########.......
 ...............................................................
<br />
"

但是在文本插入div之后，它全部在一行上。我无法在此处演示，因为当我复制文本（屏幕上显示为全部一行）并将其粘贴到StackOverflow上的此问题时，突然显示格式正确，并带有换行符。

这让我认为文本确实包含换行符BR代码，但它们在div中被忽略。

我认为对于熟悉HTML的人来说，这应该是一个简单的问题，但它让我感到困惑。在此先感谢您的帮助。

凯文

Answer 1

我将忽略你是如何生成文本的。我将假设它以这样的格式返回，其中每行的末尾都有实际的换行符（"\n"）：

var code = 
 "\
 ...............................................................\
 .................#.............................................\
 ...###############.......##############..........########......\
 .################......################........####...####.....\
 .##.....####..........##....####.....###......##.......####....\
 .###....###...##............###......##......##................\
 ..##....#######.............###.....###.....###................\
 .......###..##.............##########.......###....#########...\
 .......###.................###...............##........###.....\
 .......###.................###...............###......####.....\
 ......###.................###.................####....###......\
 ...###########........############.............##########......\
 ......................................................###......\
 ................................................########.......\
 ...............................................................\
"

我使用\来连接字符串，但"\n"也可以。现在，您所要做的就是：

<强> CSS

html {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    /* so that the text is monospace and lines up correctly */
}

<强> HTML

<div id="holder">
</div>

<强>的JavaScript

$("#holder").append(code.split("\n").join("<br>"));
// or, without jQuery
document.getElementById("holder").innerHTML = code.split("\n").join("<br>");

fiddle

您的第二个选择是，正如Hardy在评论中提到的那样，使用<pre>标记。这将保留您提供的格式，因此您只需将code插入<pre>标记即可。

Answer 2

在您的javascript中使用<pre>标记，如：

<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("\n");
    Div.innerHTML = "<pre>" + text + "</pre>";
  }
</script>

Answer 3

you only have one 

<br/>

输出中的

标记。请注意，它位于控制台输出的末尾，您需要用

替换\ n换行符

<br />

或替换

<p id="RPCTarget">(RPC output here...)</p>

与

<pre id="RPCTarget">(RPC output here...)</pre>

并删除尾随

<br />

使用innerHTML插入后，无法将文本转换为换行符

3 个答案:

fiddle