Jak uzyskać czysty tekst bez elementu HTML za pomocą JavaScript?

Mam przycisk 1 i trochę tekstu w moim HTML, jak poniżej:

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>

Gdy użytkownik kliknie przycisk, zawartość w <p id='txt'>pliku stanie się następującym oczekiwanym wynikiem:

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

Czy ktoś może mi pomóc, jak napisać funkcję JavaScript?

Dziękuję Ci.

[2017-07-25] Ponieważ jest to nadal akceptowana odpowiedź, mimo że jest to bardzo hakerskie rozwiązanie, włączam do niego kod Gabi , zostawiając swój własny, aby służyć jako zły przykład.

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

Możesz użyć tego:

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

W zależności od potrzeb możesz użyć opcji element.innerTextlub element.textContent. Różnią się na wiele sposobów. innerTextpróbuje w przybliżeniu oszacować, co by się stało, gdybyś wybrał to, co widzisz (wyrenderowany html) i skopiował to do schowka, podczas gdy textContentpo prostu usuwa tagi HTML i daje ci to, co zostało.

innerText ma również kompatybilność ze starymi przeglądarkami IE (stamtąd).

Jeśli możesz użyć jquery, to jest to proste

$("#txt").text()

Ta odpowiedź będzie działać, aby uzyskać tylko tekst dla dowolnego elementu HTML.

Ten pierwszy parametr „węzeł” jest elementem, z którego ma zostać pobrany tekst. Drugi parametr jest opcjonalny i jeśli true doda spację między tekstem w elementach, jeśli w przeciwnym razie nie byłoby tam spacji.

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

W zależności od potrzeb możesz użyć opcji element.innerTextlub element.textContent. Różnią się na wiele sposobów. innerTextpróbuje w przybliżeniu oszacować, co by się stało, gdybyś wybrał to, co widzisz (wyrenderowany html) i skopiował to do schowka, podczas gdy textContentpo prostu usuwa tagi HTML i daje ci to, co zostało.

innerText jest już używany nie tylko dla IE i jest obsługiwany we wszystkich głównych przeglądarkach . Oczywiście w przeciwieństwie do textContenttego ma kompatybilność ze starymi przeglądarkami IE (od kiedy to wymyślili).

Pełny przykład (z odpowiedzi Gabi ):

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

To działa dla mnie skompilowane na podstawie tego, co zostało tutaj powiedziane, z bardziej nowoczesnym standardem. Działa to najlepiej w przypadku wielu wyszukiwań.

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

To powinno działać:

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

Spróbuj tego skrzypiec: 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;
}

Że należy to zrobić.

Spróbuj (krótka wersja pomysłu na odpowiedź 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>

Chcesz zmienić I am working in ABC company.TO I am working in ABC company.. To są te same ciągi, więc nie widzę powodu, aby to zrobić, ale możesz to zrobić za pomocą JavaScript innerHTMLlub textContent.

element.innerHTMLto właściwość definiująca kod HTML wewnątrz elementu. Jeśli wpiszesz element.innerHTML = "<strong>This is bold</strong>, tekst „To jest pogrubiony” zostanie pogrubiony.

element.textContentz drugiej strony ustawia tekst w elemencie. Jeśli użyjesz element.textContent = "<strong>This is bold</strong>, tekst „To jest pogrubione” nie będzie pogrubiony. Użytkownik dosłownie zobaczy tekst „ To jest pogrubione

W twoim przypadku możesz użyć jednego z nich. Użyję .textContent. Kod do zmiany <p>elementu znajduje się poniżej.

function get_content(){
   document.getElementById("txt").textContent = "I am working in ABC company.";
}

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

To niestety nie zmieni tego, ponieważ zmieni to na ten sam dokładny tekst. Możesz zaryzykować, zmieniając napis „Pracuję w firmie ABC”. na coś innego.