如何使用JavaScript获得没有HTML元素的纯文本？

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

函数获取内容（）{
//我不知道在这里该怎么办！！！
}

我是
工作于
ABC公司。

当用户单击按钮时，

中的内容将成为以下预期结果：

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

//中的所有HTML元素都将消失
我在ABC公司工作。

有人能帮我写JavaScript函数吗

谢谢。

您可以使用：

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

---

根据需要，您可以使用

element.innerText

或

element.textContent

。它们在许多方面不同。如果您选择所看到的内容（呈现的html）并将其复制到剪贴板，而排序只是剥离html标记并给出剩下的内容，那么尝试近似地估计会发生什么

innerText

也与旧IE浏览器兼容（来自于旧IE浏览器）。

应该可以：

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

函数获取内容（）{
var p=document.getElementById（“txt”）；
var span=p.getElementsByTagName（“span”）；
var text=''；
对于（变量i=0；i

试试这把小提琴：

---

应该可以了。

如果您可以使用jquery，那么它很简单

$("#txt").text()

---

[2017-07-25]由于这仍然是公认的答案，尽管这是一个非常粗糙的解决方案，我还是将的代码合并到其中，留下我自己的代码作为一个坏例子

//我的黑客方法：
函数get_content（）{
var html=document.getElementById（“txt”）.innerHTML；
document.getElementById（“txt”）.innerHTML=html.replace（/]*>/g，”）；
}
//Gabi优雅的方法，但消除了一行不必要的代码：
函数gabi_content（）{
var元素=document.getElementById（'txt'）；
element.innerHTML=element.innerText | | element.textContent；
}
//并利用ID污染窗口名称空间的事实：
函数txt_content（）{
txt.innerHTML=txt.innerText | | txt.textContent；
}

.A{
背景：蓝色；
}
.B{
字体：斜体；
}
C{
字体大小：粗体；
}

我是
工作于
ABC公司。

这个答案将用于获取任何HTML元素的文本

第一个参数“node”是从中获取文本的元素。第二个参数是可选的，如果为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;
}

函数getTextFromNode（node，addSpaces）{ 变量i、结果、文本、子项； 结果=''； 对于（i=0；i根据需要，您可以使用

元素.innerText

或

元素.textContent

。它们在许多方面不同。如果您选择所看到的内容（呈现的html）并将其复制到剪贴板，而排序只是剥离html标记并给出剩下的内容，那么尝试近似地估计会发生什么

innerText

，它是。当然，与

textContent

不同的是，它与旧的IE浏览器兼容（因为它们提出了它）

完整示例（来自）：

---

这对我来说是有效的，它是根据这里所说的内容，以更现代的标准编译而成的。这对于多次查找最有效

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

Try（Gabi idea的简短版本）

函数获取内容（）{
txt.innerHTML=txt.textContent；
}

span{background:#fbb}

我是
工作于
ABC公司。

您想将

我在ABC公司工作。

更改为

我在ABC公司工作。

。这些是相同的字符串，因此我不认为有理由这样做，但您可以通过使用JavaScript

innerHTML

或

textContent

来实现这一点

element.innerHTML

是定义元素内部HTML的属性。如果键入

element.innerHTML=“此为粗体”

，则文本“此为粗体”将变为粗体文本

另一方面，

element.textContent

设置元素中的文本。如果使用

element.textContent=“此为粗体”

，则文本“此为粗体”将不为粗体。用户将看到文字“这是粗体的”

在您的情况下，您可以使用任何一种。我将使用

.textContent

。下面是更改

元素的代码

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>

函数获取内容（）{
document.getElementById（“txt”）.textContent=“我在ABC公司工作。”；
}

我是
工作于
ABC公司。

---

不幸的是，这不会改变它，因为它会改变它为相同的文本。你可以通过改变字符串“我在ABC公司工作”来改变它。“要做其他事情。

+1-正在寻找一些高性能的

text

方法，因为它在循环中完成了很多工作。jQuery的性能不够好，但速度非常快。曾在IE8+、chrome和ff工作。完美。在旧IE上，

el.textContent

将是

未定义的

，而

el.innerText

可能是

”

。但是

“| | undefined

是

undefined

。使用

el.innerText | | el.textContent | |'

可能更好。innerText不会返回隐藏文本和脚本/样式标记的内容，而textContent会返回。如果您使用的IE版本支持textContent，那么最好先使用它，因此

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

function get_content() {
   txt.innerHTML = txt.textContent;
}

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>