换行符在textarea、div、pre中的区别

关于换行符,网上有许多说法,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实现。

 

转载于:https://www.cnblogs.com/yanze/p/6358020.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值