How to get the pure text without HTML element using JavaScript

Question

I have the 1 button and some text in my HTML like the following   function get content          I don t know how to do in here        lt input type  button  onclick  get content    value  Get Content   gt   lt p id  txt  gt   lt span class  A  gt I am lt  span gt   lt span class  B  gt working in  lt  span gt   lt span class  C  gt ABC company  lt  span gt   lt  p gt    When the user clicks the button  the content in the  lt p id  txt  gt  will become the follow expected result    lt p id  txt  gt     All the HTML element within the  lt p gt  will be disappear I am working in ABC company   lt  p gt    Can anyone help me how to write the JavaScript function     Thank you

User · Answer

If you can use jquery then its simple      txt   text

User · Answer

This works for me compiled based on what was said here with a more modern standard  This works best for multiple looks up    let element   document querySelectorAll   myClass     element forEach item   gt        console log item innerHTML   item innerText    item textContent

User · Answer

This answer will work to get just the text for any HTML element   This first parameter  node  is the element to get the text from  The second parameter is optional and if true will add a space between the text within elements if no space would otherwise exist there   function getTextFromNode node  addSpaces        var i  result  text  child      result           for  i   0  i  lt  node childNodes length  i              child   node childNodes i           text   null          if  child nodeType     1                text   getTextFromNode child  addSpaces             else if  child nodeType     3                text   child nodeValue                    if  text                if  addSpaces  amp  amp    S   test result   amp  amp     S  test text   text         text              result    text                      return result

User · Answer

That should work   function get content       var p   document getElementById  txt       var spans   p getElementsByTagName  span       var text          for  var i   0  i  lt  spans length  i            text    spans i  innerHTML           p innerHTML   text      Try this fiddle  http   jsfiddle net 7gnyc 2

User · Answer

You can use this   var element   document getElementById  txt    var text   element innerText    element textContent  element innerHTML   text    Depending on what you need  you can use either element innerText or element textContent  They differ in many ways  innerText tries to approximate what would happen if you would select what you see  rendered html  and copy it to the clipboard  while textContent sort of just strips the html tags and gives you what s left   innerText also has compatability with old IE browsers  came from there

User · Answer

2017-07-25  since this continues to be the accepted answer  despite being a very hacky solution  I m incorporating Gabi s code into it  leaving my own to serve as a bad example   x000D   x000D     my hacky approach  function get content       var html   document getElementById  txt   innerHTML    document getElementById  txt   innerHTML   html replace   lt    gt    gt  g            Gabi s elegant approach  but eliminating one unnecessary line of code  function gabi content       var element   document getElementById  txt      element innerHTML   element innerText    element textContent       and exploiting the fact that IDs pollute the window namespace  function txt content       txt innerHTML   txt innerText    txt textContent    x000D   A     background  blue      B     font-style  italic      C     font-weight  bold    x000D   lt input type  button  onclick  get content    value  Get Content  bad     gt   lt input type  button  onclick  gabi content    value  Get Content  good     gt   lt input type  button  onclick  txt content    value  Get Content  shortest     gt   lt p id  txt  gt     lt span class  A  gt I am lt  span gt     lt span class  B  gt working in  lt  span gt     lt span class  C  gt ABC company  lt  span gt   lt  p gt  x000D   x000D   x000D

User · Answer

Depending on what you need  you can use either element innerText or element textContent  They differ in many ways  innerText tries to approximate what would happen if you would select what you see  rendered html  and copy it to the clipboard  while textContent sort of just strips the html tags and gives you what s left   innerText is not just used for IE anymore  and it is supported in all major browsers  Of course  unlike textContent  it has compatability with old IE browsers  since they came up with it    Complete example  from Gabi s answer    var element   document getElementById  txt    var text   element innerText    element textContent     or element textContent    element innerText element innerHTML   text

User · Answer

Try  short version of Gabi answer idea   function get content        txt innerHTML   txt textContent       x000D   x000D  function get content     x000D     txt innerHTML   txt textContent   x000D    x000D  span   background   fbb  x000D   lt input type  button  onclick  get content    value  Get Content   gt  x000D   lt p id  txt  gt  x000D   lt span class  A  gt I am lt  span gt  x000D   lt span class  B  gt working in  lt  span gt  x000D   lt span class  C  gt ABC company  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

function get content     var returnInnerHTML   document getElementById  A   innerHTML   document getElementById  B   innerHTML   document getElementById  A   innerHTML   document getElementById  txt   innerHTML   returnInnerHTML      That should do it

User · Answer

You want to change the I am working in ABC company  to I am working in ABC company   These are the same strings  so I don t see a reason to  but you can accomplish this by using the JavaScript innerHTML or textContent  element innerHTML is a property that defines the HTML inside an element  If you type element innerHTML    quot  lt strong gt This is bold lt  strong gt   it ll make the text  quot This is bold quot  bold text  element textContent  on the other hand  sets the text in an element  If you use element textContent    quot  lt strong gt This is bold lt  strong gt   The text  quot This is bold quot  will not be bold  The user will literally see the text  quot This is bold In your case  you can use either one  I ll use  textContent  The code to change the  lt p gt  element is below  function get content       document getElementById  quot txt quot   textContent    quot I am working in ABC company  quot       lt input type  quot button quot  onclick  quot get content   quot  value  quot Get Content quot   gt   lt p id  txt  gt   lt span class  quot A quot  gt I am lt  span gt   lt span class  quot B quot  gt working in  lt  span gt   lt span class  quot C quot  gt ABC company  lt  span gt   lt  p gt   This  unfortunately  will not change it because it ll change it to the same exact text  You can chance that by changing the string  quot I am working in ABC company  quot  to something else

[javascript] How to get the pure text without HTML element using JavaScript?

Examples related to javascript

Examples related to html