จะรับข้อความบริสุทธิ์โดยไม่มีองค์ประกอบ HTML โดยใช้ JavaScript ได้อย่างไร

ฉันมีปุ่ม 1 และข้อความบางส่วนใน HTML ของฉันดังต่อไปนี้:

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] เนื่องจากสิ่งนี้ยังคงเป็นคำตอบที่ได้รับการยอมรับแม้ว่าจะเป็นวิธีแก้ปัญหาที่แฮ็กมาก แต่ฉันก็รวมโค้ดของGabiไว้ในนั้นโดยปล่อยให้รหัสของตัวเองเป็นตัวอย่างที่ไม่ดี

<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 ใด ๆ

พารามิเตอร์แรก "โหนด" นี้เป็นองค์ประกอบในการรับข้อความ พารามิเตอร์ที่สองเป็นทางเลือกและถ้าเป็นจริงจะเพิ่มช่องว่างระหว่างข้อความภายในองค์ประกอบหากไม่มีช่องว่างที่นั่น

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 รุ่นเก่า (ตั้งแต่พวกมันมา)

ตัวอย่างที่สมบูรณ์ (จากคำตอบของ Gabi ):

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

ที่ควรทำ.

ลอง ( แนวคิดคำตอบแบบสั้นของ 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>