JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div id="test">
  <div >one</div>and
    a
  <div> two </div>
</div>
<dl id="log"></dl>

CSS

dt { float: left; clear: both; }
dd { margin-left: 6em; }
b { font: bold 85% monospace; margin: 0 2px; color: #039; }

JavaScript

// #3144

function getTextNew( elems )
{
    var ret = "", elem;

    for ( var i = 0; elems[i]; i++ ) {
        elem = elems[i];

        // Get the text from text nodes and CDATA nodes
        if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
            ret += elem.nodeValue;
        
        // Use textContent || innerText for elements
        } else if ( elem.nodeType === 1 ) {
            if ( typeof(elem.textContent) === 'string' )
                ret += elem.textContent;
            else if ( typeof(elem.innerText) === 'string' )
                ret += elem.innerText;
            else
                ret += getText( elem.childNodes );
            
        // Traverse everything else, except comment nodes
        } else if ( elem.nodeType !== 8 ) {
            ret += getText( elem.childNodes );
        }
    }

    return ret;
}
function check(m,s) {
  if ( s == null ) return;
  var r = "'";
  for ( var i=0; i < s.length; i++ ) {
    var c = s.charCodeAt(i);
    r += c > 0x20? s.charAt(i) : "<b>"+c+"</b>";
  }
  $("#log").append("<dt>"+m+":</dt><dd>"+r+"' "+s.length+"</dd>")
}
var t = $("#test");
check(".innerText", t[0].innerText);
check(".textContent", t[0].textContent);
check(".text()",t.text());
check("getTextNew", getTextNew(t));

/*
Here are the results of .text versus the native text methods on the DOM
element:

IE6/IE7:
.text()   'onetwo{32}' 7
.innerText 'one{13}{10}two{32}' 9

Firefox 1.5:
.text()   '{10}{32}{32}one{10}{32}{32}{32}two{32}{10}' 15
.textContent '{10}{32}{32}one{10}{32}{32}{32}two{32}{10}' 15

Opera 9.02
.text()   '{10}{32}{32}one{10}{32}{32}{32}two{32}{10}' 15
.innerText '{10}{32}{32}one{10}{32}{32}{32}two{32}{10}' 15
.textContent '{10}{32}{32}one{10}{32}{32}{32}two{32}{10}' 15 
*/