UL LI get text

Discussion in 'Javascript' started by SonnyWibawaAdi, Oct 28, 2008.

  1. 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.

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

    SonnyWibawaAdi, Oct 28, 2008
    1. Advertisements

  2. SonnyWibawaAdi

    David Mark Guest

    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:


    David Mark, Oct 29, 2008
    1. Advertisements

  3. SonnyWibawaAdi

    David Mark Guest

    (Assuming the list item has a single text node for a child.)
    David Mark, Oct 29, 2008
  4. SonnyWibawaAdi

    RobG Guest

    I'll second that.

    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.

    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
    RobG, Oct 29, 2008
  5. SonnyWibawaAdi

    David Mark Guest

    I wouldn't test that one first.
    That is true.
    I typically let the calling function sort out.

    David Mark, Oct 29, 2008
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.