How to get the text node of an element

Question

lt div class  title  gt     I am text node     lt a class  edit  gt Edit lt  a gt   lt  div gt    I wish to get the  I am text node   do not wish to remove the  edit  tag  and need a cross browser solution

User · Answer

If you mean get the value of the first text node in the element, this code will work:

var oDiv = document.getElementById("MyDiv");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    if (curNode.nodeName === "#text") {
        firstText = curNode.nodeValue;
        break;
    }
}

You can see this in action here: http://jsfiddle.net/ZkjZJ/

User · Answer

You can also use XPath s text   node test to get the text nodes only  For example  var target   document querySelector  div title    var iter   document evaluate  text     target  null  XPathResult ORDERED NODE ITERATOR TYPE   var node  var want        while  node   iter iterateNext          want    node data

User · Answer

This will ignore the whitespace as well so  your never got the Blank textNodes  code using core Javascript   var oDiv   document getElementById  MyDiv    var firstText       for  var i   0  i  lt  oDiv childNodes length  i          var curNode   oDiv childNodes i       whitespace      s         if  curNode nodeName       text   amp  amp    whitespace test curNode nodeValue              firstText   curNode nodeValue          break            Check it on jsfiddle   - http   jsfiddle net webx ZhLep

User · Answer

text   - for jquery      title   clone        clone the element  children     select all the children  remove       remove all the children  end      again go back to selected element  text         get the text of element

User · Answer

Another native JS solution that can be useful for  complex  or deeply nested elements is to use NodeIterator  Put NodeFilter SHOW TEXT as the second argument   whatToShow    and iterate over just the text node children of the element    x000D   x000D  var root   document querySelector  p    x000D      iter   document createNodeIterator root  NodeFilter SHOW TEXT   x000D      textnode  x000D   x000D     print all text nodes x000D  while  textnode   iter nextNode      x000D    console log textnode textContent  x000D    x000D   lt p gt  x000D   lt br gt some text lt br gt 123 x000D   lt  p gt  x000D   x000D   x000D    You can also use TreeWalker  The difference between the two is that NodeIterator is a simple linear iterator  while TreeWalker allows you to navigate via siblings and ancestors as well

User · Answer

ES6 version that return the first  text node content  const extract    node    gt      const text       node childNodes  find child   gt  child nodeType     Node TEXT NODE     return text  amp  amp  text textContent trim

User · Answer

You can get the nodeValue of the first childNode using      title   0  childNodes 0  nodeValue   http   jsfiddle net TU4FB

User · Answer

This is my solution in ES6 to create a string contraining the concatenated text of all childnodes  recursive   Note that is also visit the shdowroot of childnodes   function text from node        const extract    node    gt      node childNodes  reduce           acc  childnode    gt                   acc              childnode nodeType     Node TEXT NODE   childnode textContent trim                        extract childnode                   childnode shadowRoot   extract childnode shadowRoot                            return extract node  filter text   gt  text length  join   n        This solution was inspired by the solution of https   stackoverflow com a 41051238  1300775

User · Answer

Pure JavaScript  Minimalist  First off  always keep this in mind when looking for text in the DOM   MDN - Whitespace in the DOM  This issue will make you pay attention to the structure of your XML   HTML   In this pure JavaScript example  I account for the possibility of multiple text nodes that could be interleaved with other kinds of nodes  However  initially  I do not pass judgment on whitespace  leaving that filtering task to other code   In this version  I pass a NodeList in from the calling   client code         Gets strings from text nodes  Minimalist  Non-robust  Pre-test loop version    Generic  cross platform solution  No string filtering or conditioning       author Anthony Rutledge    param nodeList The child nodes of a Node  as in node childNodes     param target A positive whole number  gt   1    return String The text you targeted     function getText nodeList  target        var trueTarget   target - 1          length   nodeList length     Because you may have many child nodes       for  var i   0  i  lt  length  i              if   nodeList i  nodeType     Node TEXT NODE   amp  amp   i     trueTarget                 return nodeList i  nodeValue      Done  No need to keep going                       return null      Of course  by testing node hasChildNodes   first  there would be no need to use a pre-test for loop         Gets strings from text nodes  Minimalist  Non-robust  Post-test loop version    Generic  cross platform solution  No string filtering or conditioning       author Anthony Rutledge    param nodeList The child nodes of a Node  as in node childNodes     param target A positive whole number  gt   1    return String The text you targeted     function getText nodeList  target        var trueTarget   target - 1          length   nodeList length          i   0       do           if   nodeList i  nodeType     Node TEXT NODE   amp  amp   i     trueTarget                 return nodeList i  nodeValue      Done  No need to keep going                      i          while  i  lt  length        return null        Pure JavaScript  Robust  Here the function getTextById   uses two helper functions  getStringsFromChildren   and filterWhitespaceLines       getStringsFromChildren          Collects strings from child text nodes    Generic  cross platform solution  No string filtering or conditioning       author Anthony Rutledge    version 7 0    param parentNode An instance of the Node interface  such as an Element  object     return Array of strings  or null     throws TypeError if the parentNode is not a Node object     function getStringsFromChildren parentNode        var strings               nodeList          length          i   0       if   parentNode instanceof Node            throw new TypeError  The parentNode parameter expects an instance of a Node                if   parentNode hasChildNodes              return null     We are done  Node may resemble  lt element gt  lt  element gt             nodeList   parentNode childNodes      length   nodeList length       do           if   nodeList i  nodeType     Node TEXT NODE                 strings push nodeList i  nodeValue                       i          while  i  lt  length        if  strings length  gt  0            return strings             return null        filterWhitespaceLines          Filters an array of strings to remove whitespace lines    Generic  cross platform solution       author Anthony Rutledge    version 6 0    param textArray a String associated with the id attribute of an Element     return Array of strings that are not lines of whitespace  or null     throws TypeError if the textArray param is not of type Array     function filterWhitespaceLines textArray         var filteredArray               whitespaceLine         s         Non-capturing Regular Expression       if   textArray instanceof Array            throw new TypeError  The textArray parameter expects an instance of a Array                for  var i   0  i  lt  textArray length  i              if   whitespaceLine test textArray i          If it is not a line of whitespace              filteredArray push textArray i  trim         Trimming here is fine                        if  filteredArray length  gt  0            return filteredArray      Leave selecting and joining strings for a specific implementation              return null     No text to return        getTextById          Gets strings from text nodes  Robust    Generic  cross platform solution       author Anthony Rutledge    version 6 0    param id A String associated with the id property of an Element     return Array of strings  or null     throws TypeError if the id param is not of type String     throws TypeError if the id param cannot be used to find a node by id     function getTextById id         var textArray   null                 The hopeful output      var idDatatype   typeof id           Only used in an TypeError message      var node                             The parent node being examined       try           if  idDatatype      string                 throw new TypeError  The id argument must be of type String  Got     idDatatype                      node   document getElementById id            if  node     null                throw new TypeError  No element found with the id      id                      textArray   getStringsFromChildren node            if  textArray     null                return null     No text nodes found  Example   lt element gt  lt  element gt                     textArray   filterWhitespaceLines textArray            if  textArray length  gt  0                return textArray     Leave selecting and joining strings for a specific implementation                   catch  e            console log e message              return null     No text to return      Next  the return value  Array  or null  is sent to the client code where it should be handled  Hopefully  the array should have string elements of real text  not lines of whitespace   Empty strings      are not returned because you need a text node to properly indicate the presence of valid text  Returning      may give the false impression that a text node exists  leading someone to assume that they can alter the text by changing the value of  nodeValue  This is false  because a text node does not exist in the case of an empty string   Example 1    lt p id  bio  gt  lt  p gt   lt  -- There is no text node here  Return null  -- gt    Example 2    lt p id  bio  gt    lt  p gt   lt  -- There are at least two text nodes    n    here  -- gt    The problem comes in when you want to make your HTML easy to read by spacing it out  Now  even though there is no human readable valid text  there are still text nodes with newline    n   characters in their  nodeValue properties   Humans see examples one and two as functionally equivalent--empty elements waiting to be filled  The DOM is different than human reasoning  This is why the getStringsFromChildren   function must determine if text nodes exist and gather the  nodeValue values into an array   for  var i   0  i  lt  length  i          if  nodeList i  nodeType     Node TEXT NODE                textNodes push nodeList i  nodeValue             In example two  two text nodes do exist and getStringFromChildren   will return the  nodeValue of both of them    n    However  filterWhitespaceLines   uses a regular expression to filter out lines of pure whitespace characters   Is returning null instead of newline    n   characters a form of lying to the client   calling code  In human terms  no  In DOM terms  yes  However  the issue here is getting text  not editing it  There is no human text to return to the calling code   One can never know how many newline characters might appear in someone s HTML  Creating a counter that looks for the  second  newline character is unreliable  It might not exist   Of course  further down the line  the issue of editing text in an empty  lt p gt  lt  p gt  element with extra whitespace  example 2  might mean destroying  maybe  skipping  all but one text node between a paragraph s tags to ensure the element contains precisely what it is supposed to display   Regardless  except for cases where you are doing something extraordinary  you will need a way to determine which text node s  nodeValue property has the true  human readable text that you want to edit  filterWhitespaceLines gets us half way there   var whitespaceLine         s         Non-capturing Regular Expression   for  var i   0  i  lt  filteredTextArray length  i          if   whitespaceLine test textArray i          If it is not a line of whitespace          filteredTextArray push textArray i  trim         Trimming here is fine             At this point you may have output that looks like this     Dealing with text nodes is fun     Some people just use jQuery      There is no guarantee that these two strings are adjacent to each other in the DOM  so joining them with  join   might make an unnatural composite  Instead  in the code that calls getTextById    you need to chose which string you want to work with   Test the output   try       var strings   getTextById  bio         if  strings     null               Do something        else if  strings length     1               Do something with strings 0        else      Could be another else if            Do something  It all depends on the context          catch  e        console log e message         One could add  trim   inside of getStringsFromChildren   to get rid of leading and trailing whitespace  or to turn a bunch of spaces into a zero length string       but how can you know a priori what every application may need to have happen to the text  string  once it is found  You don t  so leave that to a specific implementation  and let getStringsFromChildren   be generic   There may be times when this level of specificity  the target and such  is not required  That is great  Use a simple solution in those cases  However  a generalized algorithm enables you to accommodate simple and complex situations

User · Answer

var text       title   contents   filter function       return this nodeType    Node TEXT NODE     text      This gets the contents of the selected element  and applies a filter function to it  The filter function returns only text nodes  i e  those nodes with nodeType    Node TEXT NODE

[javascript] How to get the text node of an element?

Examples related to javascript

Examples related to jquery