Firefox's textContent doesn't match Chrome's innerText

Question

Since Firefox doesn't have innerText, I am using textContent to retrieve the text of the body of a document. However, textContent returns anything within noscript and script tags that are in the body (and maybe other tags, I'm not thoroughly sure), which means that textContent will look different that what is normally returned by innerText.

Is there an equivalent in Firefox that returns the same output as Chrome's innerText function?

possible duplicate of [I need the solution to a Javascript DOM textnode selection using javascript?](http://stackoverflow.com/questions/6227223/i-need-the-solution-to-a-javascript-dom-textnode-selection-using-javascript) — gblazex, Jun 08 '11 at 00:22
I don't really see how it's a duplicate. Although the answers are similar, the questions are pretty distinct. — Ivan, Jun 08 '11 at 00:27
http://stackoverflow.com/questions/2653670/innertext-textcontent-vs-retrieving-each-text-node — gblazex, Jun 08 '11 at 09:56
http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox/1359822#1359822 — gblazex, Jun 08 '11 at 09:56
...and I could go on. You surely didn't use the **search** tool. Of course the questions are not using the exact same *words* as yours, but the answers and solutions (which you are searching for btw) are there... — gblazex, Jun 08 '11 at 09:57
If you are only interested in those two browsers, have you considered using *textContent* in both? — RobG, Jun 08 '11 at 09:59
Which is reflected in the fact that @kennebec simply copies his answer from one topic to another... — gblazex, Jun 08 '11 at 09:59
In all honesty, I don't think you understood my question. I understand the difference between both textContent and innerText; however, my question was if there is an equivalent to Chrome's innerText function, which there is not. FF's textContent returns text in script and noscript tags, whereas innerText does not. None of the questions you linked to address that. — Ivan, Jun 08 '11 at 17:45

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Edit

Included filter to not get content of certain elements

They are two different properties - one is defined in the W3C DOM 3 Core, the other is a Microsoft proprietary property that has been widely copied but has no open specification.

Probably the best way to normalise the two is to not use them, instead use a DOM-walking routine that collects text nodes and creates a string. Use the same routine for both (all) browsers.

// Get the text within an element
// Doesn't do any normalising, returns a string
// of text as found.
function getText(element) {
  var text = [];
  var self = arguments.callee;
  var el, els = element.childNodes;
  var excluded = {
    'noscript': 'noscript',
    'script'  : 'script'
  };

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];

    // May need to add other node types here
    if ( el.nodeType == 1 && 
       !(el.tagName.toLowerCase() in excluded)) {
      text.push(self(el));
  
    // If working with XML, add nodeType 4 to get text from CDATA nodes
    } else if (el.nodeType == 3) {

      // Deal with extra whitespace and returns in text here.
      text.push(el.data);
    }
  }
  return text.join('');
}

Thanks for that additional filter. – Ivan Jun 08 '11 at 15:46 — Ivan, Jun 08 '11 at 15:46

score 1 · Answer 2 · edited Apr 30 '12 at 12:34

1

See this:

http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/

Basically you can use jQuery's text() method, or if you also want the linebreaks, he has his own plugin code on that URL.

Whenever 2 browsers are different, I would advise you to research jQuery as a solution.

edited Apr 30 '12 at 12:34

Wladimir Palant

56,865
12
98
126

answered Jun 07 '11 at 23:46

tomdemuyt

4,572
2
31
60

Does jQuery's .text() method ignore text in – Ivan Jun 08 '11 at 00:10
No idea, at this moment I so much dislike FireFox that I dread to start it up to check it. Go Chrome !! – tomdemuyt Jun 08 '11 at 21:01
1

It doesn't take long to check the source (about line 4280 in v 1.5.1) or run some tests. The content of both *noscript* and *script* elements is included. – RobG Jun 08 '11 at 21:05

score 0 · Answer 3 · answered Aug 20 '15 at 04:59

The solution I used that worked for both Chromium and Firefox on Linux was to address the childNodes of the object. Each of the nodes has a valid textContent property which returns just the text, to wit:

var element = document.getElementById(element_id);

// here element_id is an element which contains text, then
// a child <p> whose text will be used for something else.
// e.g. <li>string1<p>string2</p></li>

var first = element.childNodes[0].textContent; // string1
var second = element.childNodes[1].textContent; // string2

Of course, this needs to be confirmed on mobile browsers, IE *shudder* and versions {alpha .. omega}, but it's a start.

score 0 · Answer 4 · edited Aug 19 '15 at 13:10

0

function deepText(node) {
    var A= [];
    if(node) {
        node= node.firstChild;
        while(node!= null) {
            if(node.nodeType== 3) {
                if(/\S/.test(node.data)) A[A.length] = node.data;
            }
            else A = A.concat(deepText(node));
            node = node.nextSibling;
        }
    }
    return A;
}
alert(deepText(document.body));

edited Aug 19 '15 at 13:10

Elavarasan Muthuvalavan - Lee

1,960
1
22
33

answered Jun 07 '11 at 23:49

kennebec

102,654
32
106
127

score 0 · Answer 5 · edited Aug 19 '15 at 13:20

if you want to make it browser independent use this code

var field = document.getElementById(id);  // where u want to use innertext

if(field != null)
{
     if(navigator.appName == "Netscape") // appName for both FireFox and Chrome its is "Netscape" i checked it with different version.
           field.textContent = value;
     else // for For IE v 8 i checked  .textContent is not supported by IE for me it was not working.
           field.innerText = value;
}

Firefox's textContent doesn't match Chrome's innerText

5 Answers5

Edit