Equivalent of innerHTML for text

Question

Possible Duplicate:
How does jQuery’s .text() work, internally?

I'm looking for the text equivalent of innerHTML, i.e.

<p>Hello, <i>World!</i></p>

then innerText(p) should return Hello, World!.

Note: I'm aware of jQuery's text() function. I want to know how it is implemented so I can do special handling on some nodes, like inserting extra white space.

Remotely related to ['innerText' works in IE, but not in Firefox](http://stackoverflow.com/q/1359469) — Pekka, Oct 15 '12 at 11:58
While this is not *exactly* the same question as http://stackoverflow.com/questions/5023432, it certainly is close enough. — cwallenpoole, Oct 15 '12 at 12:01

score 2 · Answer 1 · edited May 23 '17 at 12:12

Here is the source for getText(): Taken from question: How does jQuery’s .text() work, internally?

// Utility function for retreiving the text value of an array of DOM nodes
Sizzle.getText = function( 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;

        // Traverse everything else, except comment nodes
        } else if ( elem.nodeType !== 8 ) {
            ret += Sizzle.getText( elem.childNodes );
        }
    }

    return ret;
};

score 1 · Accepted Answer · edited Oct 15 '12 at 12:22

1

how about this?

var getInnerText = function (element) {
    var nodes = element.childNodes,
        i = 0,
        len = nodes.length,
        text = '';
    for (; i < len; i++) {
        if (nodes[i].nodeType === 3 || nodes[i].nodeType === 4) {
            // 3 means text node, 4 means cdata
            text += nodes[i].nodeValue;
        } else {
            text += getInnerText(nodes[i]);
        }
    }
    return text;
};

then: var innerText = getInnerText(myElement);

jsfiddle

edited Oct 15 '12 at 12:22

Aaron Digulla

321,842
108
597
820

answered Oct 15 '12 at 12:09

Omri

278
2
9

1

I'm not sure about the `text` parameter. I feel that you duplicate part of the text content. – Aaron Digulla Oct 15 '12 at 12:11
you're right. now this should do the trick – Omri Oct 15 '12 at 12:16

score 0 · Answer 3 · answered Oct 15 '12 at 12:07

use innerText property instead of innetHTML.

Example...

<html>
<body>
<p id="myP">Sample Text inside a <b>p</b> element <a href="#"> this is a link </a></p>
<button onclick="alert(myP.innerHTML);">InnerHTML</button>
<button onclick="alert(myP.innerText);">InnerText</button>
</body>
</html>

Equivalent of innerHTML for text

3 Answers3

Linked