Wie bekomme ich den reinen Text ohne HTML-Element mit JavaScript?

Ich habe die 1-Schaltfläche und etwas Text in meinem HTML wie folgt:

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>

Wenn der Benutzer auf die Schaltfläche klickt, wird der Inhalt in <p id='txt'>dem folgenden erwarteten Ergebnis:

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

Kann mir jemand helfen, wie man die JavaScript-Funktion schreibt?

Danke dir.

[2017.07.25] , da dies die akzeptierte Antwort auf weiterhin, trotz einer sehr hacky Lösung zu sein, ich bin Einbeziehung Gabi ‚s Code hinein, meine eigenen zu verlassen als schlechtes Beispiel zu dienen.

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

Sie können dies verwenden:

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

Je nachdem, was Sie benötigen, können Sie entweder element.innerTextoder verwenden element.textContent. Sie unterscheiden sich in vielerlei Hinsicht. innerTextversucht zu approximieren, was passieren würde, wenn Sie auswählen, was Sie sehen (gerendertes HTML) und es in die Zwischenablage kopieren, während Sie textContenteinfach die HTML-Tags entfernen und Ihnen geben, was noch übrig ist.

innerText hat auch Kompatibilität mit alten IE-Browsern (kam von dort).

Wenn Sie jquery verwenden können, ist es einfach

$("#txt").text()

Diese Antwort funktioniert, um nur den Text für jedes HTML-Element zu erhalten.

Dieser erste Parameter "Knoten" ist das Element, von dem der Text abgerufen werden soll. Der zweite Parameter ist optional. Wenn true, wird ein Leerzeichen zwischen den Texten innerhalb der Elemente eingefügt, wenn dort sonst kein Leerzeichen vorhanden wäre.

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

Je nachdem, was Sie benötigen, können Sie entweder element.innerTextoder verwenden element.textContent. Sie unterscheiden sich in vielerlei Hinsicht. innerTextversucht zu approximieren, was passieren würde, wenn Sie auswählen, was Sie sehen (gerendertes HTML) und es in die Zwischenablage kopieren, während Sie textContenteinfach die HTML-Tags entfernen und Ihnen geben, was noch übrig ist.

innerText wird nicht mehr nur für den Internet Explorer verwendet und wird in allen gängigen Browsern unterstützt . Im Gegensatz dazu textContentist es natürlich mit alten IE-Browsern kompatibel (seitdem sie darauf gekommen sind).

Vollständiges Beispiel (aus Gabis Antwort ):

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

Dies funktioniert für mich kompiliert basierend auf dem, was hier mit einem moderneren Standard gesagt wurde. Dies funktioniert am besten für mehrere Suchvorgänge.

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

Das sollte funktionieren:

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

Versuchen Sie diese Geige: 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;
}

Das sollte es tun.

Versuchen Sie es (Kurzversion der Gabi- Antwortidee )

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>