有没有可以保留windows CRLF的HTML元素，即\\r\\n

Question

• In my program, I need to render a HTML page where user can pick specific words from the text area and use javascript to capture the selected position indexes(startIndex, endIndex) and perform further process to the source data.
• However, there's a use case the source data contains windows CRLF, when it's rendered to a text box(I used span ), the CRLF is lost. So the index is always offset by 1 per line.

• I know potentially we can fix it from the backend, but it would be nice and more consistent if we can preserve the CRLF on the web page.

  Example code:

 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">

I want to see input.length==test.length

I have explored different fashion of white-space style(including pre), but no luck.

The console.log might not be very clear for this purpose, but you can use Firefox debuger to watch the input variable and see \\r\\n .

Thanks a lot

Answer 1

The pre element preserves newlines exactly the way you need it!

<pre id="test" />

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