4

I'm writing a JavaScript application that will check user input for Carriage Returns (Hex 0D) and Line Feeds (Hex 0A), however, if the text is pasted into a web-form textarea field, the carriage returns disappear, leaving only the line feeds as line-breaking characters. I need to identify the carriage returns to properly process the data.

Here is a minimal example:

function checkForCR() {
  if (/\r/.test(document.crform.sandbox.value)) {
    alert('Carriage Returns found.');
  } else {
    alert('Carriage Returns NOT found.');
  }
  return false;
}
<form name='crform' onsubmit="return checkForCR();">
  <textarea name="sandbox" cols="50" rows="5"></textarea>
  <br />
  <input type="submit" value="Check for Carriage Returns">
</form>

If I paste some text containing carriage-returns into the field, I'm never able to get a positive test for \r, no matter what I paste.

Is this the normal behavior of a textarea field in a browser? Is there any way to preserve the carriage return characters along with the line-feeds in web-form input?

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Miguel Gualdron
  • 129
  • 7
  • Notice, that automatic text wrapping doesn't create new-lines. Also most browsers use `\n` as a new-line character, which seems to [work fine](http://jsfiddle.net/hckttzka/). – Teemu Aug 27 '15 at 16:19
  • Have you checked this on different browsers? I believe the standard is that a newline in a text area should be represented as \n\r, but that not all browsers honor this. –  Aug 27 '15 at 16:21
  • I have checked it on Chrome (Version 44.0.2403.155), and Internet Explorer (Version 9.08.112) on Windows. I've also tried Chrome (Version 44.0.2403) on Linux, but I'm getting the same result. – Miguel Gualdron Aug 27 '15 at 16:29
  • I'm copying and pasting from a file that has line-breaks in DOS format, and have checked with a binary editor that the `\r` character is present in the text, but the test in the web-form is unable to see these characters. – Miguel Gualdron Aug 27 '15 at 16:31
  • @Mig10 Can you see the new-lines in the textarea? Windows' new-line consists of two characters (`\r\n`), in browsers' textarea it's just a single character (`\n`), except IE, which uses `\r`.You can check both, with a code in my fiddle, or with the code in navasd's answer. – Teemu Aug 27 '15 at 16:32
  • @Teemu I can see the `\n` characters in the field, but the `r` characters are all gone. I created a small test file (in DOS format -- with `\r\n` line endings), which I can copy into the clipboard, and then paste into the field, but the `\r` characters do not show up in the text area. – Miguel Gualdron Aug 27 '15 at 19:17
  • Yes, browsers will strip it off when parsing the pasted value. You could try `pre` element instead of `textarea`, but I doubt the result would be the same. – Teemu Aug 27 '15 at 19:21
  • I tried nesting the `textarea` in `pre` tags, adding the `white-space: pre;` CSS property/value, and even using a `div` with the `contenteditable` attribute in place of the `textarea`. The only way I was able to prevent carriage returns from being stripped out was by hard coding them (e.g. using the ` ` character entity). – DoctorDestructo Aug 27 '15 at 19:42
  • Actually I meant content editable `pre`, `textarea` will strip off CRs. – Teemu Aug 28 '15 at 04:03
  • @Teemu I did try setting `contenteditable` on the `pre` tags too, along with a bunch of other stuff probably not worth mentioning. I also did a bit of Googling on the matter, and at this point, I'm convinced that there is no way to make a browser preserve carriage returns in user input. – DoctorDestructo Aug 28 '15 at 15:13
  • 2
    [This answer](http://stackoverflow.com/a/14217315/2759272) contains a nice summary of the rules governing the treatment of line breaks in user input, along with links to the W3 specs. – DoctorDestructo Aug 28 '15 at 15:28
  • @DoctorDestructo thank you for your research, and the link to the answer above. For now, I will do the best I can with the `\n` characters that remain in the field. – Miguel Gualdron Aug 28 '15 at 19:10

1 Answers1

0

Try using this expression instead:

/[\n\r]/g

if (/[\n\r]/g.test(document.crform.sandbox.value))

A new line consists of \n (newline) and \r (carriage return).

dnavas77
  • 98
  • 1
  • 8
  • This gives me a positive result, but only because the character class `[\n\r]` includes BOTH line-feeds and carriage-returns, and the line-feeds are unaltered in the text. However, I need to be able to tell the difference between `\r\n`, and `\n` in the same bit of text. So I need for the `\r` characters to be preserved in the field. – Miguel Gualdron Aug 27 '15 at 16:37
  • Where is the data/text coming from? backend? – dnavas77 Aug 27 '15 at 16:39
  • One place is Excel, for example. The user copies a few cells from a spreadsheet, the line endings at the end of a row are `\r\n`, but any embedded line-breaks within a cell are `\n`. So I need the `\r` to be preserved after pasting, to distinguish between the two situations. – Miguel Gualdron Aug 27 '15 at 19:22