回车与换行

本文用于解决回车与换行的问题。在不同操作系统下的表现与字符进制问题;在html下textare下回车字符的问题。

由来

我们通常所说的回车换行其实只相当于一个概念,即一行结束,开始下一行,英文叫做End-of-Line,简写为EOL。你也可以将这理解为一个逻辑上的换行。

从打印机时代说起,在打字机上,有一个部件叫Carriage,它是打字头,相当于打字机的光标。每输入一个字符,Carriage就前进一格。当输满一行后,想要切换到下一行时,需要Carriage在两个方向上的运动:水平和竖直。水平方向上需要将Carriage移到一行的起始位置,竖直方向上需要纸张向上移动一行,此时也就是相当于Carriage下移了一行。分为两步:

  1. Carriage Return(CR),也即回车,它在ASCII表中的值为0x0D,可以用转义符\r表示
  2. Line Feed(LF),也即换行,它在ASCII表中的值为0x0A,可以用转义符\n表示

后期不同的系统设计,使得回车与换行出现分歧,就目前情况:

  • MAC OS / Linux / UNIX都是一个LF,即\n(或0x0A)
  • windows CRLF作为EOL,即\r\n(或0x0D 0x0A)

由差异造成的问题:

  1. 一个直接后果是,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行;
  2. 而Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号。
  3. Linux保存的文件在windows上用记事本看的话会出现黑点。

一些工具会自动进行格式转换,如GIT就去会把CRLF转为LF

text mode & binary mode

文本格式: 是普通的文本,还是二进制,还是 raw html 设计格式问题。

textarea

HTML 是br换行,不支持转义字符\n.

我的chatroom是把字符串转为了 dom结构,所以不能换行,html是br换行。因为在console里都是换行了的。 通过content.indexOf("\n") 可以知道字符串里是有\n的。但出现在html标签里是空格 。

还有注意使用get 和 post 传递数据时的格式问题:get不带格式,post带格式。

所以对于textarea的两种解决方法:

1: 由于浏览器差异,textarea换行时也会有差别,所以都替换为 <br>即可。

replace("\r","<br/>");  
replace("\n","<br/>");  
replace("\n\r","<br/>");  

2: <pre>标签:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。将<pre>放在<p>标签里解决文本单行过长自动换行问题。就能解决 用户自己的换行与文本过长的自动换行。

参考: