Как получить чистый текст без элемента 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] поскольку это по-прежнему общепринятый ответ, несмотря на то, что это очень хакерское решение, я включаю в него код Габи , оставляя свой собственный в качестве плохого примера.

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

Вы хотите изменить I am working in ABC company.To I am working in ABC company.. Это те же самые строки, поэтому я не вижу причин для этого, но вы можете сделать это с помощью JavaScript innerHTMLили textContent.

element.innerHTML- это свойство, определяющее HTML внутри элемента. Если вы element.innerHTML = "<strong>This is bold</strong>введете текст, он выделит жирным шрифтом текст «Это жирный».

element.textContent, с другой стороны, устанавливает текст в элементе. Если вы используете element.textContent = "<strong>This is bold</strong>, текст «Это полужирный» не будет полужирным. Пользователь буквально увидит текст « Это жирный

В вашем случае вы можете использовать любой из них. Я воспользуюсь .textContent. Код для изменения <p>элемента приведен ниже.

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>

Это, к сожалению, не изменит его, потому что он изменит его на тот же самый точный текст. Вы можете случайно изменить строку «Я работаю в компании ABC». к чему-то другому.