Làm cách nào để có được văn bản thuần túy không có phần tử HTML bằng JavaScript?

Tôi có nút 1 và một số văn bản trong HTML của mình như sau:

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>

Khi người dùng nhấp vào nút, nội dung trong <p id='txt'>sẽ trở thành kết quả mong đợi sau:

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

Có ai có thể giúp tôi cách viết hàm JavaScript không?

Cảm ơn bạn.

[2017-07-25] vì đây tiếp tục là câu trả lời được chấp nhận, mặc dù là một giải pháp rất khó hiểu, tôi đang kết hợp mã của Gabi vào đó, để lại mã của tôi để làm ví dụ xấu.

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

Bạn có thể sử dụng cái này:

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

Tùy thuộc vào những gì bạn cần, bạn có thể sử dụng element.innerTexthoặc element.textContent. Chúng khác nhau về nhiều mặt. innerTextcố gắng ước lượng những gì sẽ xảy ra nếu bạn chọn những gì bạn thấy (html được kết xuất) và sao chép nó vào khay nhớ tạm, trong khi textContentchỉ tách các thẻ html và cung cấp cho bạn những gì còn lại.

innerText cũng có khả năng tương thích với các trình duyệt IE cũ (ra đời từ đó).

Nếu bạn có thể sử dụng jquery thì nó đơn giản

$("#txt").text()

Câu trả lời này sẽ hoạt động để chỉ lấy văn bản cho bất kỳ phần tử HTML nào.

Tham số đầu tiên "nút" là phần tử để lấy văn bản từ đó. Tham số thứ hai là tùy chọn và nếu đúng sẽ thêm khoảng trắng giữa văn bản bên trong các phần tử nếu không có khoảng trắng sẽ tồn tại ở đó.

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

Tùy thuộc vào những gì bạn cần, bạn có thể sử dụng element.innerTexthoặc element.textContent. Chúng khác nhau về nhiều mặt. innerTextcố gắng ước lượng những gì sẽ xảy ra nếu bạn chọn những gì bạn thấy (html được kết xuất) và sao chép nó vào khay nhớ tạm, trong khi textContentchỉ tách các thẻ html và cung cấp cho bạn những gì còn lại.

innerText không chỉ được sử dụng cho IE nữa , và nó được hỗ trợ trong tất cả các trình duyệt chính . Tất nhiên, không giống như textContent, nó có khả năng tương thích với các trình duyệt IE cũ (kể từ khi họ nghĩ ra nó).

Toàn bộ ví dụ (từ câu trả lời của Gabi ):

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

Điều này phù hợp với tôi được biên soạn dựa trên những gì đã nói ở đây với một tiêu chuẩn hiện đại hơn. Điều này hoạt động tốt nhất cho nhiều lần tra cứu.

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

Cần làm việc:

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

Hãy thử trò chơi này: 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;
}

Nên làm vậy.

Hãy thử (phiên bản ngắn của ý tưởng câu trả lời 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>