Element innerText/textContent for all browsers
innerText is supported (supposedly) in every major browser aside from Firefox. textContent is supported in every major browser, including IE from version 9 onwards (check this out on QuirksMode) - this is good, because we only support from 9 onwards, but it still doesn’t suit our needs (I’ll outline why in a moment).
innerText is ideal, because it handles the node contents with one major advantage over
Internet Explorer introduced
element.innerText. The intention is pretty much the same with a couple of differences:
- Note that while
textContentgets the content of all elements, including
<style>elements, the mostly equivalent IE-specific property,
innerText, does not.
innerTextis also aware of style and will not return the text of hidden elements, whereas textContent will.
innerTextis aware of CSS styling, it will trigger a reflow, whereas
What this means is that when analysing a particular node, all of the scripts and styles contained within are also retrieved. This is impossible to work with in a practical manner - and without the full support of the innerText property, we’ll need to find another alternative.
I spent a significant amount of time trawling through Google search results when stumbling onto this problem, but most people that attempted to address the problem had much shallower requirements than I did. No one wrote about the “accidental” inclusion of script and style content, except for this post. Mike over at Club Ajax runs through the uses and discrepancies around innerText and textContent, eventually proposing a solution with a function that will behave in the same way across all major browsers. That function, and some examples, can be found here.
Disclaimer: The function provided uses DOM recursion and element cloning to achieve its clean, formulaic output. It should not be used in certain areas where calls may be made in a loop or interval. The pros will far outweigh the cons, however, and this function is currently the only one I’ve seen to achieve a consistent result across all of the major browsers. I tested in the latest versions of Chrome, Firefox and IE.
I made modifications to the function for my personal use, to include a parameter to specify an array of custom element tags. This array is used to strip elements from the output, in addition to the script and style tags.