Question

在我的程序中，我需要渲染一个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;
}

<span class="demo" id="demo">

我想看input.length==test.length

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

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

非常感谢

Answer 1

pre元素完全按照您的需要保留换行符！

<pre id="test" />

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

是否有任何可以保留Windows CRLF的HTML元素，即\ r \ n

1 个答案: