UL LI get text

[SonnyWibawaAdi]

Hi All,

I want a simple javascript to just get the text in HTML list. Example
below, I want to get 'Here is' text. I tried innerHTML with a list of
'Here is My item 1 My item 2'. That simple.

<UL>
<LI>Here is</LI>
<UL>
<LI>My item 1</LI>
<LI>My item 2</LI>
</UL>
</LI>
</UL>


Thanks,

 

[David Mark]

Hi All,

I want a simple javascript to just get the text in HTML list. Example
below, I want to get 'Here is' text. I tried innerHTML with a list of

So you want the text from a list item? Certainly the innerHTML
property would not be the best choice. If this is to be a cross-
browser solution, you will need a wrapper that returns the innerText
or textContent property of the element. In most browsers, one or the
other (or both) will be set.

Start here:

https://developer.mozilla.org/En/DOM/Element.textContent

[snip]

 

[David Mark]

liElement.firstChild.data should be supported in all reasonably current
browsers.

(Assuming the list item has a single text node for a child.)

 

[RobG]

So you want the text from a list item? Certainly the innerHTML
property would not be the best choice.

I'll second that.

If this is to be a cross-
browser solution, you will need a wrapper that returns the innerText
or textContent property of the element.

That has issues too. Safari's innerText property doesn't return the
text of elements hidden or made not visible by CSS and Opera will
return the content of script elements (perhaps not issues in this
case, but worth noting for a general case). The only really reliable,
cross-browser method is to recurs down the DOM tree and extract the
text from text nodes.

There is also the issue of white space, which is treated differently
in various browsers, so the getText function needs to consider whether
to normalise that (which usually means removing as much as possible, a
"lowest common denominator" approach) or letting the calling function
sort it out.

In most browsers, one or the
other (or both) will be set.

A simple version is:

function getText(el) {
if (typeof el.textContent == 'string') return el.textContent;
if (typeof el.innerText == 'string') return el.innerText;
}

A recursive method where script stripping is desired:

function getText(el)
{
var x = el.childNodes;
var txt = '';
var node;

for (var i=0, len=x.length; i<len; ++i){
node = x;

if (3 == node.nodeType) {
txt += node.data;
} else if (1 == node.nodeType){

if (node.tagName && node.tagName.toLowerCase() != 'script') {
txt += arguments.callee(node);
}
}
}
return txt.replace(/\s+/g,' '); // Maybe trim leading
// and trailing whitespace too
}

 

[David Mark]

I'll second that.


That has issues too.  Safari's innerText property doesn't return the

I wouldn't test that one first.

text of elements hidden or made not visible by CSS and Opera will
return the content of script elements (perhaps not issues in this
case, but worth noting for a general case).  The only really reliable,
cross-browser method is to recurs down the DOM tree and extract the
text from text nodes.

That is true.

There is also the issue of white space, which is treated differently
in various browsers, so the getText function needs to consider whether
to normalise that (which usually means removing as much as possible, a
"lowest common denominator" approach) or letting the calling function
sort it out.

I typically let the calling function sort out.

[snip]