不意外地又荒廢了一段時間，我是哪裡？這裡是誰？ 趁著開工手上沒太多事前先寫一點東西吧。小小探究一下 HTML 中有點讓人混淆的innerText與textContent。

講古時間

嚴格來說textContent最初就在 W3C 標準裡，innerText是 IE 在玩的東西，2016 年才被列入標準，FireFox 在45版後才跟進實作。這兩種屬性都能取得 HTML 元素中的文字，但結果有微妙的差異，可參閱 MDN。

比較

  • innerText取得的是經瀏覽器引擎渲染後的純文字，所見即所得，連續空白會被整併，<style>tag或被style屬性所隱藏的區塊就不會列出等等
  • textContent取得 HTML 中每個節點中含有文本的文字

有聽沒有懂很正常，還是看個實際範例，以下是 folk 別人的 CodePen 再加以小修改的 code，慢慢用心體會：

參透其中奧秘的話，要使用哪種方法取得文字就看需求了，像是如果不想要取得的文字被<pre>、<p>等tag斷行，或想保留空白、忠實呈現 HTML 裡的 Enter 換行，就會考慮使用textContent。

Character Entity Reference

在後面幾段塞的特殊字元，中文翻為字元實體參照，一種用 name 或 number 來表示 Unicode 字元的方式，可以參考 Character Entity Reference Chart，最常見的大概就&nbsp;（不斷行空格符號）。

這些字元代表特殊格式的 unicode，瀏覽器渲染時幾乎跟空格一樣，但經由innerHTML或textContent取出後，這些字元才根據其格式表現出來。

其實這才是寫本文的動機，算之前工作遇到的小坑，剛好和取網頁元素文字的需求喇在一起，迸出新滋味、試誤試到懷疑人生。原本看起來正常的 HTML，print 出來突然縮排換行嚇死人，什麼？案例太極端了用不到？當然不會遇到最好，然而墨菲定律告訴我們：夜路走多碰到鬼，code寫多踩到雷，看過有印象才知道可能的雷藏在哪。

Reference