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?

Answer 1

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('');
}

Answer 2

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.

Answer 3

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));

Answer 4

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;
}

Answer 5

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.