使用jQuery text()将textarea内容放入pre时丢失末尾空行的原因

1. 表单控件与HTML元素的换行处理逻辑不同 #

• textarea作为表单输入控件，设计目标就是完整保留用户输入的所有文本格式，不管是中间还是末尾的换行（\n或\r\n），都会被控件直接渲染成空行，不会做任何省略。
• <pre>是普通HTML块级元素，它的渲染受浏览器DOM文本解析规则约束。即便设置了white-space: pre-wrap，浏览器对文本节点**末尾的单独\n**可能会做优化省略——因为这个换行后面没有任何内容，浏览器会认为它是“无意义的空白”，不进行渲染。

2. jQuery .text()的插入机制与浏览器渲染的冲突 #

jQuery的.text()方法是把内容以纯文本节点的形式插入DOM，不会解析HTML，但浏览器拿到文本节点后，会按自己的规则处理换行：

• 单独的\n在末尾时，容易被浏览器忽略；
• 而\n\r组合中，\r（回车符）会被视为一个独立的空白字符，和\n配合后，浏览器会认为这一行存在“空白内容”，因此会保留对应的空行。

3. 替换规则的有效性差异 #

• 替换成单独\n时，本质上没有改变换行符的类型，浏览器依然会对末尾的\n做省略处理，所以无效；
• 替换成\n\r后，每个换行都变成了“换行+回车”的组合，回车符让末尾的空行拥有了“可识别的空白内容”，浏览器就会正常渲染出空行。

内容的提问来源于stack exchange，提问作者Paul