IE中jQuery.fn.text, jQuerey.fn.val 和 dom.innerText, dom.value 的换行与tab问题

最近使用jQuery的过程中发现关于.text, .val 和dom自身的.innerText, .value 在取值与赋值方面存在的差异.

以及IE7与IE8的pre标签的呈现差异(即white-space:pre).  现与大家分享一下.

 

在IE中, 对pre标签的文本取值与赋值, 可以使用$("p").text("1\n2"), 亦可使用$("p")[0].innerText = "1\n2";

不知道大家是否知道, 这两种方式的取值与赋值得到的结果, 产生的效果是存在差异的.

 

换行符

看过jquery-1.4.4的代码以后发现, 在最新版本的jQuery中, text取值使用的是获得最基础的textNode的nodeValue, 也就是说, text取值和innerText取值的差异在于 nodeValue和innerText的差异:

对网页自身代码的取值 text() 返回的是1个字符char(13) 即 "\r",  innerText 返回的是2个字符char(13)+char(10) 即 "\r\n".

这里有一个诡异的问题:

当网页代码中包含一个自然换行时, text()可以取出这个换行符, 但是如果使用 innerText = innerText 赋值以后, 页面呈现没有发生任何变化, 但此时再用text()取值, 将无法得到换行符. 而使用text(text)的方式赋值后, 使用text()则可以得到换行符.

赋值呈现

1. innerText使用\r或者\n都可以产生换行效果, 但在IE8中, 连续的\r和\n会被合并为一个换行效果(这跟正统的对回车符与换行符的理解相符). 但在IE7中, 无论\r与\n如何组合, 都无法产生连续换行的效果.

并且, 使用innerText产生的换行只能单向的, 也就是说, 只能产生换行效果, 这个换行符却无法再次通过javascript捕捉到(无论innerText还是text).

2. text在IE8中, 回车符\r和换行符\n产生同等的效果换行效果, 不会被合并, 并且可以被javascript捕捉到. 不同的是innerText对独立的\n捕捉到的是\n, 对\r\n捕捉到的是\r\n, 对独立的\r捕捉到的也是\r\n.

这里就会产生一个问题, 标准换行应该是两个字符\r\n, 但是如果使用jQuery将这个字符串呈现在pre中, 则会产生两个换行效果(IE8). 在IE7中, \n会变成一个空格的效果.

 

制表符(\t)

text方法的赋值和取值在处理制表符的时候都没有问题, 而innerText在赋值的时候则无法进行\t的赋值, 这个赋值的呈现效果将变成一个空格.再次使用innerText取回也会发现那个\t变成了char(32), 而使用text取回这个\t则会诡异得变成char(160)这么一个奇怪的值.

 

使用text还是innerText

在呈现数据的时候, 究竟使用text还是innerText, 这取决于你数据库中的换行是\r, \n还是\r\n.

值得提醒的是, 在自然提交的表单中, 表单域中的换行符是正统换行, 即每个换行(效果)提交后都是完整的两个字符\r\n.

 

另外还需要提醒各位的是, 虽然表单域在正常提交的情况下换行是\r\n, 但如果你是通过ajax提交的, 那么换行就变成\n了

因为.val()取值时, 会自动过滤掉\r字符.

 

是不是看晕乎了, 我自己也很晕乎, 不过动动手, 去测试几个数据就会大概的明了了.