Comment obtenir le texte pur sans élément HTML en utilisant JavaScript?

J'ai le bouton 1 et du texte dans mon HTML comme suit:

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>

Lorsque l'utilisateur clique sur le bouton, le contenu de la <p id='txt'>deviendra le résultat attendu suivant:

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

Quelqu'un peut-il m'aider à écrire la fonction JavaScript?

Je vous remercie.

[2017-07-25] puisque cela continue d'être la réponse acceptée, bien que ce soit une solution très piratée, j'y incorpore le code de Gabi , laissant le mien pour servir de mauvais exemple.

<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'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;
}
</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>

Vous pouvez utiliser ceci:

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

En fonction de vos besoins, vous pouvez utiliser soit element.innerTextou element.textContent. Ils diffèrent à bien des égards. innerTextessaie de se rapprocher de ce qui se passerait si vous sélectionniez ce que vous voyez (rendu html) et le copiez dans le presse-papiers, tandis qu'en textContentquelque sorte , supprime simplement les balises html et vous donne ce qui reste.

innerText a également une compatibilité avec les anciens navigateurs IE (venus de là).

Si vous pouvez utiliser jquery, c'est simple

$("#txt").text()

Cette réponse fonctionnera pour obtenir uniquement le texte de tout élément HTML.

Ce premier paramètre "node" est l'élément à partir duquel obtenir le texte. Le deuxième paramètre est facultatif et s'il est vrai, il ajoutera un espace entre le texte dans les éléments si aucun espace n'existerait autrement.

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;
}

En fonction de vos besoins, vous pouvez utiliser soit element.innerTextou element.textContent. Ils diffèrent à bien des égards. innerTextessaie de se rapprocher de ce qui se passerait si vous sélectionniez ce que vous voyez (rendu html) et le copiez dans le presse-papiers, tandis qu'en textContentquelque sorte , supprime simplement les balises html et vous donne ce qui reste.

innerText n'est plus seulement utilisé pour IE , et il est pris en charge dans tous les principaux navigateurs . Bien sûr, contrairement àtextContent , il est compatible avec les anciens navigateurs IE (depuis qu'ils l'ont inventé).

Exemple complet (de la réponse de Gabi ):

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

Cela fonctionne pour moi compilé sur la base de ce qui a été dit ici avec une norme plus moderne. Cela fonctionne mieux pour plusieurs recherches.

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

Cela devrait fonctionner:

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;
}

Essayez ce violon: http://jsfiddle.net/7gnyc/2/

function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

Ça devrait le faire.

Essayez (version courte de l' idée de réponse de Gabi )

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>