Bagaimana cara mendapatkan teks murni tanpa elemen HTML menggunakan JavaScript?

Saya memiliki tombol 1 dan beberapa teks di HTML saya seperti berikut:

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>

Ketika pengguna mengklik tombol, konten di <p id='txt'>akan menjadi hasil yang diharapkan sebagai berikut:

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

Adakah yang bisa membantu saya bagaimana menulis fungsi JavaScript?

Terima kasih.

[25-07-2017] karena ini terus menjadi jawaban yang diterima, meskipun merupakan solusi yang sangat meretas, saya memasukkan kode Gabi ke dalamnya, meninggalkan kode saya sendiri sebagai contoh yang buruk.

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

Anda dapat menggunakan ini:

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

Bergantung pada apa yang Anda butuhkan, Anda dapat menggunakan element.innerTextatau element.textContent. Mereka berbeda dalam banyak hal. innerTextmencoba untuk memperkirakan apa yang akan terjadi jika Anda memilih apa yang Anda lihat (rendered html) dan menyalinnya ke clipboard, sementara textContentsemacam hanya menghapus tag html dan memberi Anda apa yang tersisa.

innerText juga memiliki kompatibilitas dengan browser IE lama (berasal dari sana).

Jika Anda bisa menggunakan jquery maka itu sederhana

$("#txt").text()

Jawaban ini akan berfungsi untuk mendapatkan teks untuk setiap elemen HTML.

Parameter "node" pertama ini adalah elemen untuk mendapatkan teks. Parameter kedua adalah opsional dan jika true akan menambahkan spasi di antara teks di dalam elemen jika tidak ada spasi di sana.

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

Bergantung pada apa yang Anda butuhkan, Anda dapat menggunakan element.innerTextatau element.textContent. Mereka berbeda dalam banyak hal. innerTextmencoba untuk memperkirakan apa yang akan terjadi jika Anda memilih apa yang Anda lihat (rendered html) dan menyalinnya ke clipboard, sementara textContentsemacam hanya menghapus tag html dan memberi Anda apa yang tersisa.

innerText tidak hanya digunakan untuk IE lagi , dan didukung di semua browser utama . Tentu saja, tidak seperti textContent, ia memiliki kesesuaian dengan browser IE lama (sejak mereka memunculkannya).

Contoh lengkap (dari jawaban Gabi ):

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

Ini bekerja untuk saya yang disusun berdasarkan apa yang dikatakan di sini dengan standar yang lebih modern. Ini berfungsi paling baik untuk beberapa pencarian.

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

Itu seharusnya berhasil:

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

Coba biola ini: 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;
}

Itu harus dilakukan.

Coba (versi singkat dari ide jawaban 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>