换行符在textareadivpre中的区别
Posted 炎泽
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了换行符在textareadivpre中的区别相关的知识,希望对你有一定的参考价值。
关于换行符,网上有许多说法,IE早期的浏览器是\\r\\n,有的浏览器是\\r,但很难找到确切的版本号。经过本人正则匹配测试,chrome、firefox、safari、IE11都是\\n,
因此保险起见,若对换行符进行正则匹配,应当同时匹配\\n, \\r以及\\r\\n.
值得一提的是\\n、\\r和\\r\\n都有换一行的效果,有些同学写换行时常写作\\n\\r,这就相当于换了两行,因此必须注意!
换行符用于textarea
textarea内的换行便是以换行符的形式实现,换行符也能用于textarea
换行符用于一般div
当我们尝试将\\n用于一般div
eg: document.querySelector(".a").innerhtml= "12\\n1";
显示:
未显示换行,这是因为在默认情况下空白会被忽略,所以无论是文本里的空白、换行都会被当做一个空格处理,
若想显示空白,需添加属性white-space: pre; 保留换行和空白 或者pre-line 保留换行,忽略空白
增添white-space: pre;显示:
这时候获取innerHTML,输出: 12 1,
/\\n/.test(document.querySelector(".a").innerHTML) // true,
换行符用于可编辑div
eg: document.querySelector(".a").innerHTML= "1 2\\n1";
显示:
通过审查元素,可以发现可编辑div自带white-space: pre;属性!因此文本空白和换行符都对它有效
而可编辑div内直接进行换行操作,换行又是如何实现的?
进行换行:
再输出innerHTML
1 2 1 <div>11</div><div>111</div>
因此: 对于可编辑div,换行符有效,但它本身的换行是通过div来实现的,这不同于textarea!
一般pre
对于一般pre,文本空格与换行符都有效,也自带white-space: pre;属性。
可编辑pre
类似于可编辑div,换行符有效,本身的换行通过增添div实现。
以上是关于换行符在textareadivpre中的区别的主要内容,如果未能解决你的问题,请参考以下文章