innerText equivalent for Mozilla

fci · 09-03-2004, 02:09 AM

the scenario...
getting the content of a div then putting that string in a textarea.
the problem is that there are links in the content.. which I thought I could solve by making the function recursive but it seems to not act as I had expected. IE returns exactly what I need.

Also, how would I be able to get the newline to be passed as well ?

BTW, I did try searching.. and I think my issue is probably more with the recursiveness since it seems to end after getInnerText() is called again.

Code:

var txt
function getInnerText(o)
{
    children    = o.childNodes
    children_len= children.length
    for (var i=0; i<children_len; i++) {
        if (children.item(i).childNodes.length>0) {
            getInnerText(children.item(i))
        } else if (children.item(i).nodeType==3) {
            txt += children.item(i).nodeValue
        }
    }
}

here is a sample div:

Code:

<div id="text_3" onClick="getInnerText(this);alert(txt)" style="cursor:pointer;cursor:hand;font-family:Times;font-size:8pt">31sadfasdf <a href="http://www.domain.com/?msg=21&link=http%3A%2F%2Fwww.test.com%2F">http://www.test.com/</a><br>adsfasdfadsf<br>asdfadsf<br>adsfadsf</div>

Mr J · 09-03-2004, 03:12 PM

Sorry mis-read your post

fci · 09-03-2004, 04:11 PM

I posted this on a mailing list I'm on and someone was able to help me..
he replied with:

Quote:

You aren't returning anything from recursion.

// untested, but should do the trick
function getInnerText(o)
{
var txt = "";
var i;

for(i = 0; i < o.childNodes.length; i++)
{
if(o.childNodes[i].nodeType == 1 /* ELEMENT_NODE */)
txt += getInnerText(o.childNodes[i]);
if(o.childNodes[i].nodeType == 3 /* TEXT_NODE */)
txt += o.childNodes[i].nodeValue;
}

return(txt);
}

As far as newlines go: you are, in general, not guaranteed anything
about whitespace in HTML - you may or may not get newlines depending
on browser & JavaScript implementation. The only way you can
force whitespace/newline preservation is enclosing the relevant text
in <![CDATA[ ... ]]> tokens,

-Bob

so... I ended up with this:

Code:

function getInnerText(o)
{
    var txt='';
    for (var i=0; i<o.childNodes.length; i++) {
        switch(o.childNodes[i].nodeType) {
            case 1 :    txt += getInnerText(o.childNodes[i]);   break
            case 3 :    txt += o.childNodes[i].nodeValue;       break
            case 8 :    txt += "\n";                            break
        }

    }
    return txt;
}

I'm using comment nodes() to signify the \n.

chatterjee_yash · 05-07-2008, 10:22 AM

Hi,

You can use "textContent" in mozilla which is equivalent to "innerText" in IE.

.........
Yash.

Kor · 05-07-2008, 08:35 PM

You don't need a recursion. You may simply use the getElementsByTagName() method -with a wild card as argument - and nextSibling(). You may also remove the gaps or the carriage return on using RegExp.

Could be something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addText(obj,txt){
obj.firstChild?obj.firstChild.nodeType==3?txt+=(obj.firstChild.nodeValue+' '):null:null;

return txt;
}
function getInnerText(obj){

var txt='';
txt=addText(obj,txt)
var ele=obj.getElementsByTagName('*'), i=0, e;
while(e=ele[i++]){
txt=addText(e,txt);
e.nextSibling?e.nextSibling.nodeType==3?txt+=(e.nextSibling.nodeValue+' '):null:null;
}
txt=txt.replace('\n','','g').replace(/\s{1,}/g,' ').replace(/\s$/,'');//removes the gaps and the last space
return txt;
}
</script>
<body>
<div id="text_3" onclick="alert(getInnerText(this))" style="cursor:pointer;cursor:hand;font-family:Times;font-size:8pt">

31sadfasdf
<div>foo<span>fee </span></div>

 <a href="http://www.domain.com/?msg=21&link=http%3A%2F%2Fwww.test.com%2F">http://www.test.com/</a><br>adsfasdfadsf

<br>asdfadsf
<br>adsfadsf
</div>
</body>
</html>

rnd me · 05-07-2008, 11:58 PM

far simpler and slightly faster crossbrowser code:

Code:

function getInnerText(o)
{
  return o.textContent ? o.textContent : o.innerText
}