是否有任何 HTML 元素可以保留 windows CRLF，即 \r\n答案

【问题标题】：Is there any HTML element that can preserve windows CRLF, i.e \r\n是否有任何 HTML 元素可以保留 windows CRLF，即 \r\n
【发布时间】：2019-02-25 07:04:39
【问题描述】：

在我的程序中，我需要呈现一个 HTML 页面，用户可以在其中从文本区域中选择特定的单词，并使用 javascript 来捕获选定的位置索引（startIndex、endIndex）并对源数据执行进一步的处理。
但是，有一个用例源数据包含 windows CRLF，当它被渲染到文本框时（我使用span），CRLF 丢失了。所以索引总是每行偏移 1。
我知道我们可以从后端修复它，但如果我们可以在网页上保留 CRLF，那会更好并且更一致。

示例代码：

var input = "Hello\r\nJavaScript!"
document.getElementById("demo").innerHTML = input;
var test = document.getElementById("demo").innerHTML
console.log('length of input:' + input.length)
console.log("length of test: " + test.length)

span.demo {
  white-space: pre-wrap;
}

&lt;span class="demo" id="demo"&gt;

我想看input.length==test.length

我探索了white-space风格的不同时尚（包括pre），但没有运气。

console.log 对此可能不是很清楚，但您可以使用 Firefox 调试器查看 input 变量并查看 \r\n。

非常感谢

【问题讨论】：

工作得很好，无论是在 sn-p 中，还是当我将您的代码复制并粘贴到小提琴中时，jsfiddle.net/o1wkq92n
通常的元素是<pre>。另外，不要将<span> 元素放在<head> 中；所有可见的内容都进入<body>。
@04FS，看起来不错，但是 \r\n 被替换并缩短了。请检查我更新的代码 sn-p
@ChrisG，这有助于回答问题吗？

标签： javascript html css

【解决方案1】：

pre 元素以您需要的方式保留换行符！

<pre id="test" />

<script>
  document.getElementById("test").innerHTML = "Hello\r\nJavaScript!";
</script>

【讨论】：

不，它不起作用。您可以尝试转储输入字符串的长度，然后获取 innerHTML 的长度。它将短一。
我已经更新了我的代码 sn-p 以更好地测试它。