Як отримати чистий текст без елемента HTML за допомогою JavaScript?

У моєму HTML є кнопка 1 та текст, наприклад:

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>

Коли користувач натисне кнопку, вміст у <p id='txt'>заповіті стане наступним очікуваним результатом:

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

Чи може хто-небудь допомогти мені, як написати функцію JavaScript?

Дякую.

[2017-07-25], оскільки це продовжує залишатися прийнятою відповіддю, незважаючи на те, що це дуже хакітне рішення, я включаю в нього код Габі , залишаючи свій власний слугувати поганим прикладом.

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

Ви можете скористатися цим:

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

Залежно від того, що вам потрібно, ви можете використовувати element.innerTextабо element.textContent. Вони різняться багатьма способами. innerTextнамагається наблизитись до того, що трапиться, якби ви вибрали побачене (наданий html) і скопіювали його у буфер обміну, в той час як textContentсортуєте лише смужки тегів html та надасте вам те, що залишилося.

innerText також має порівнянність зі старими браузерами IE (прийшов звідти).

Якщо ви можете використовувати jquery, то його просто

$("#txt").text()

Ця відповідь допоможе отримати текст лише для будь-якого елемента HTML.

Цей перший параметр "вузол" є елементом для отримання тексту. Другий параметр є необов’язковим, і якщо true додасть пробіл між текстом всередині елементів, якщо в іншому випадку пробіл там не буде.

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

Залежно від того, що вам потрібно, ви можете використовувати element.innerTextабо element.textContent. Вони різняться багатьма способами. innerTextнамагається наблизитись до того, що трапиться, якби ви вибрали побачене (наданий html) і скопіювали його у буфер обміну, в той час як textContentсортуєте лише смужки тегів html та надасте вам те, що залишилося.

innerText більше не використовується для IE , а підтримується у всіх основних браузерах . Звичайно, на відміну від цього textContent, він має порівнянність зі старими браузерами IE (оскільки вони його придумали).

Повний приклад (з відповіді Габі ):

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

Цей твір для мене складено на основі сказаного тут з більш сучасним стандартом. Це найкраще працює для кількох пошуків.

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

Це має працювати:

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

Спробуйте цю загадку: 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;
}

Це повинно це робити.

Спробуйте (коротка версія ідеї відповіді Габі )

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>