How to get the value of a span that contains another span with Javascript?

Question

I have one <span> tag inside another one.

<span id="count">255<span>words</span></span>

and I would like to get only the value of the first <span> tag, the value 255.

What I have tried:

var words = document.getElementById('count'); //Gets the <span>

alert(words.value); //undefined --> does not exist for <span> tag
alert(words.innerHTML); //255<span>words</span>
alert(words.innerText); //255words
alert(words.textContent); //255words

And I know I can do:

var storedWords = words.innerText;
storedWords = storedWords.replace('words','');
alert(storedWords); //255

but I would like to do it directly.

Is it possible to retrieve only the value of the first span?

Answer 1

First get the SPAN element, then select it's first child(which is text node) and then get it's value

document.getElementById('count').firstChild.nodeValue

NOTE: This will return you text and if you want int in integer then you need to parse it using parseInt function with decimal base(base 10).

parseInt(document.getElementById('count').firstChild.nodeValue, 10)

Answer 2

Kind of variant

var allNodes = document.getElementById('count').childNodes;
var text="";
for( var i in allNodes ){
   if( allNodes[i].nodeType == 3 ){
     text += " "+allNodes[i].wholeText;
   }
}

console.log( text );

<span id="count">255<span>words</span><div>text</div>text</span>

Updated snippet for first level text, even if there other elements

Answer 3

Here is a way to get all text that is not wrapped in child elements:

function getText(node) {
    // Take clone of the node
    var node = node.cloneNode(true);
    // remove child elements from it, not text nodes
    for (child of node.childNodes){
        if (child.nodeType !== 3) node.removeChild(child);
    }
    return node.textContent;
}

console.log (getText(document.querySelector('span#count')));

<span id="count">255 <span>words</span> or 127</span>

Answer 4

While you've already accepted an answer, I'd like to offer a couple of further options:

function getChildTextOf (n) {
  // retrieving the childNodes of the passed-in node (n)
  // and converting those nodes into an Array
  let text = Array.from( n.childNodes )
    // filtering that Array to retain only those nodes
    // whose nodeType is equal to 3 (and so are textNodes)
    .filter( n => n.nodeType === 3 )
    // returning a new Array composed of the nodeValue
    // (the text) of those nodes:
    .map(n => n.nodeValue);

  // if we have a truthy value stored in the text variable,
  // and that that text variable (an Array) is of length
  // 1 we return the first element of the Array (a String),
  // otherwise we return the whole Array:
  return text && text.length === 1 ? text.shift() : text;
}

console.log(getChildTextOf(document.getElementById('count')));

function getChildTextOf(n) {
  let text = Array.from(n.childNodes).filter(n => n.nodeType === 3).map(n => n.nodeValue);

  return text && text.length === 1 ? text.shift() : text;
}

console.log(getChildTextOf(document.getElementById('count')));

<span id="count">255<span>words</span></span>

JS Fiddle demo.

And:

function getChildTextOf (n) {

  // cloning the passed-in node (n), along
  // with its own children:
  let clone = n.cloneNode(true);

  // retrieving the children (child-elements) of the
  // cloned-node, converting that collection into an
  // Array, to use Array methods:
  Array.from( clone.children )

    // iterating over that Array of element-children
    // removing each child from its parent (the clone)
    .forEach(child => clone.removeChild(child));

  // normalising the clone, which combines all text-nodes
  // into one, removing any/all empty nodes:
  clone.normalize();

  // returning the textContent of that clone:
  return clone.textContent;
}

console.log(getChildTextOf(document.getElementById('count')));

function getChildTextOf(n) {
  let clone = n.cloneNode(true);
  Array.from(clone.children).forEach(child => clone.removeChild(child));
  clone.normalize();
  return clone.textContent;
}

console.log(getChildTextOf(document.getElementById('count')));

<span id="count">255<span>words</span></span>

JS Fiddle demo.

References:

• Array.from().
• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.map().
• Arrow functions.
• `Node.cloneNode().
• Node.nodeValue.
• Node.nodeType.
• Node.normalize().
• Node.removeChild().
• Node.textContent().

Answer 5

you can use this too $('#count').contents()[0]