Get plain text without HTML element using javascript?

Question

I have button 1 and some text in my HTML, for example:

function get_content(){ // I don't know how to do in here!!! } <input type="button" onclick="get_content()" value="Get Content"/> <p id='txt'> <span class="A">I am</span> <span class="B">working in </span> <span class="C">ABC company.</span> </p> 

When the user clicks the button, the contents in <p id='txt'> will become the following expected result:

 <p id='txt'> // All the HTML element within the <p> will be disappear I am working in ABC company. </p> 

Can anyone help me how to write a JavaScript function? Thank.

Answer 1

[2017-07-25], as this continues to be the accepted answer, although this is a very hacky decision, I include Gabi code in it, leaving my own to serve as a bad example.

 <style> .A {background: blue;} .B {font-style: italic;} .C {font-weight: bold;} </style> <script> // my hacky approach: function get_content() { var html = document.getElementById("txt").innerHTML; document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, ""); } // Gabi 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; } </script> <input type="button" onclick="get_content()" value="Get Content (bad)"/> <input type="button" onclick="gabi_content()" value="Get Content (good)"/> <input type="button" onclick="txt_content()" value="Get Content (shortest)"/> <p id='txt'> <span class="A">I am</span> <span class="B">working in </span> <span class="C">ABC company.</span> </p> 

Answer 2

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 different ways. innerText tries to get closer to what happens if you select what you see (rendered html) and copy it to the clipboard, and textContent sorts only the html tag bands and gives you what is left.

innerText also compatible with older IE browsers (from there).

Answer 3

If you can use jquery then its simple

 $("#txt").text() 

Answer 4

This answer will work to get only text for any HTML element.

This first “node” parameter is an element for receiving text. The second parameter is optional, and if true will add a space between the text inside the elements, if there was no space.

 function getTextFromNode(node, addSpaces) { var i, result, text, child; result = ''; for (i = 0; i < 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 && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text; result += text; } } return result; } 

Answer 5

Depending on what you need, you can use either element.innerText or element.textContent . They differ in different ways. innerText tries to get closer to what happens if you select what you see (rendered html) and copy it to the clipboard, and textContent just removes the html tags and gives you what is left.

innerText no longer used for IE , and it is supported in all major browsers . Of course, unlike textContent , it is compatible with older IE browsers (since they came up with it).

Full example (from Gabi answer ):

 var element = document.getElementById('txt'); var text = element.innerText || element.textContent; // or element.textContent || element.innerText element.innerHTML = text; 

Answer 6

This works for me compiled based on what was said here with a more modern standard. This works best for a few looks.

 let element = document.querySelectorAll('.myClass') element.forEach(item => { console.log(item.innerHTML = item.innerText || item.textContent) }) 

Answer 7

This should work:

 function get_content(){ var p = document.getElementById("txt"); var spans = p.getElementsByTagName("span"); var text = ''; for (var i = 0; i < spans.length; i++){ text += spans[i].innerHTML; } p.innerHTML = text; } 

Try this script: http://jsfiddle.net/7gnyc/2/

Answer 8

 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.

Answer 9

Try it (short version of Gabi answer the idea)

 function get_content() { txt.innerHTML = txt.textContent; } 

 function get_content() { txt.innerHTML = txt.textContent ; } 

 span { background: #fbb} 

 <input type="button" onclick="get_content()" value="Get Content"/> <p id='txt'> <span class="A">I am</span> <span class="B">working in </span> <span class="C">ABC company.</span> </p>