JavaScript kullanarak HTML öğesi olmadan saf metin nasıl elde edilir?

1 düğmesi ve HTML’imde aşağıdaki gibi bir metin var:

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>

Kullanıcı düğmeyi tıkladığında, içindeki içerik <p id='txt'>aşağıdaki beklenen sonuç olacaktır:

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

Biri bana JavaScript işlevini nasıl yazmam konusunda yardım edebilir mi?

Teşekkür ederim.

Bu çok hacky çözüm olmasına rağmen, kabul cevabı olmaya devam beri [2017/07/25], ben dahil ediyorum Gabi kötü örnek teşkil etmek benim kendi bırakarak içine 'ın kodunu.

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

Bunu kullanabilirsiniz:

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

İhtiyacınız olan şeye bağlı olarak element.innerTextveya kullanabilirsiniz element.textContent. Birçok yönden farklılık gösterirler. innerTextGördüğünüzü seçip panoya kopyalarsanız ne olacağını tahmin etmeye çalışır, bu sırada textContenthtml etiketlerini çıkarır ve size kalanları verir.

innerText ayrıca eski IE tarayıcıları ile de uyumludur (oradan geldi).

Jquery kullanabiliyorsanız, o zaman basit

$("#txt").text()

Bu cevap, herhangi bir HTML öğesi için yalnızca metni elde etmeye çalışacaktır.

Bu ilk parametre "node", metnin alınacağı öğedir. İkinci parametre isteğe bağlıdır ve eğer doğruysa, aksi halde orada boşluk olmayacaksa, öğeler içindeki metin arasına bir boşluk ekler.

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

İhtiyacınız olan şeye bağlı olarak element.innerTextveya kullanabilirsiniz element.textContent. Birçok yönden farklılık gösterirler. innerTextGördüğünüzü seçip panoya kopyalarsanız ne olacağını tahmin etmeye çalışır, bu sırada textContenthtml etiketlerini çıkarır ve size kalanları verir.

innerText artık sadece IE için kullanılmıyor ve tüm büyük tarayıcılarda destekleniyor . Tabii ki, aksine textContent, eski IE tarayıcıları ile uyumludur (bulduklarından beri).

Tam örnek ( Gabi'nin cevabından ):

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

Bu benim için çalışıyor, burada söylenenlere göre daha modern bir standartla derlendi. Bu, çoklu aramalarda en iyi sonucu verir.

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

Bu işe yaramalı:

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

Bu keman deneyin: 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;
}

Bunu yapmalı.

Deneyin (Gabi cevap fikrinin kısa versiyonu )

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>