javascript textContent與innerText的異同分析

2019-11-21 00:11:10

字體：大中小

來源：轉載

供稿：網友

textContent與innerText的不同

IE下有個innerText屬性，FF下有個textContent屬性。很多以前給IE寫腳本的，在FF下找不到innerText屬性，于是網上搜到的建議是用textContent來替代。反之給FF寫腳本的也一樣。

但是實際上，這里有個誤解。網上很多文章說“FF下等效于innerText屬性的屬性是textContent”――――但是事實上并非如此。innerText與textContent有幾點很重要的不同，導致它們在一些情況下不能直接互換使用。

前些日子寫了個代碼高亮JS插件，在IE下工作完全正常，而在FF下就不對頭。在IE下使用的是innerText屬性，而在FF下使用的則是textContent屬性。在進行字符串處理的時候二者的不同導致了完全不一樣的結果。于是就專門寫了點東西來測試二者的不同。

根據測試的結果表明：
innerText：它的內容實際上就是你在瀏覽器看到的內容。它的值是經過瀏覽器解釋過的結果：它將元素的innerHTML換碼、解釋，最終顯示出來，然后去除各種格式信息留下的純文本。它會把<br/>換成換行符，會將多個空格并成一個空格對待，而本來的換行符卻并不會引起換行，IE會將其當作一個普通的單詞邊界（一般是空格）。再說的形象點，一個元素的innerText屬性的值，和你將這個元素內容復制粘貼到記事本里的內容一致。

textContent：它的內容則是innerHTML去除所有標簽后的內容（我懷疑這個是從XMLDOM中照搬過來的屬性，特性完全一致）。它會將innerHTML中的轉義字符（<、什么的）進行換碼，但是不對任何html標簽進行解釋，而是直接剔除它們。它也不會對innerHTML中的文本按照HTML的方式進行格式轉換，比如多個空格還會原原本本地保留，不會合并為一個空格，換行符仍然存在（相反<br/>卻不會導致換行）。

更加簡練的總結：IE中的innerText是需要對innerHTML的值進行：
1、HTML轉義（等同于XML轉義，對<、&等轉義字符進行處理）；
2、經過HTML解釋和CSS樣式解釋；
3、之后又剔除格式信息
之后留下的純文本。
而FF中的textContent沒有2、3步，在經過了HTML轉義之后直接剔除所有html標簽后得到的純文本。

一個例子：

復制代碼代碼如下:

 
<div id=”T1″> 
ABCD 
EFG HIJ<br/>KLM  N 
OPQ<div>RS</div>T 
T 
<div> 

這個id為T1的div，
在IE中的innerText屬性的值為：

復制代碼代碼如下:

 
ABCD EFG HIJ 
KLM N OPQ 
RS 
T T 

而在FF中的textContent的屬性的值為：

復制代碼代碼如下:

 
(這里有個換行) 
ABCD 
EFG HIJKLM N 
OPQRST 
T 

注意那個div中還嵌套了個div，而這個更能反映IE的innerText和FF的textContent各自的處理方式的不同：
div是塊（block）元素，默認會獨占一行，因此，在IE中的innerText反映為上述div中的RS獨占一行，而FF的textContent完全不理會HTML格式，因此其textContent中的RS是和其它字符連在一起的，不會獨占一行。

如果想更進一步，看看這個有趣的結果：
假如給里面那個div加一個style=”float:left;”，那么這個div就會由塊元素變化為行元素，不再獨占一行，因此IE的innerText屬性中RS便不再獨占一行，而與其它字符連在一起，而在FF中由于textContent不理會標簽更不會理會CSS，因此它的textContent屬性的值不會有任何變化。

這么看來，很多網上說的“讓FF支持innerText屬性”云云，其實都是多多少少有問題的。要實現IE的innerText，遠沒有想象中的那么簡單，你若要使用JavaScript讓FF擁有和innerText完全一樣的效果，得自己把html標簽屬性全部parse一遍，解釋它們，甚至還需要去解釋css……
（不過根據原理，貌似通過剪貼板的復制和取回操作可以在FF下模擬innerText效果（這個未測試），但是1有副作用，2FF下的剪貼板操作也很麻煩。）

不過還好，大多數時候我們并不需要那么精確，使用innerHTML做點簡單的處理即可達到比較接近的效果了。

注：以上代碼均在IE6和FF3下完成測試。

上一篇：document.write與writeln的輸出內容區別說明

下一篇：js各種驗證文本框輸入格式(正則表達式)