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

我有一个按钮和一些文本在我的 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 函数吗？

谢谢你。

317234 次浏览
小开

你可以用这个:

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

根据您的需要，您可以使用 element.innerText或 element.textContent。它们在很多方面都不同。如果您选择所看到的内容(呈现的 html)并将其复制到剪贴板，那么 innerText将尝试近似地估计会发生什么情况，而 textContent只是删除 html 标记并给出剩下的内容。

innerText还具有与旧 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;
}

试试这个小提琴: 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;
}

应该可以了。

小开

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

$("#txt").text()
小开
最佳答案

[2017-07-25]因为这仍然是被接受的答案，尽管是一个非常蹩脚的解决方案，我正在将 加比的代码合并到其中，让我自己的代码成为一个糟糕的例子。

// 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;
}
.A {
background: blue;
}


.B {
font-style: italic;
}


.C {
font-weight: bold;
}
<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>

小开

这个答案只能得到任何 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;
}
小开

根据您的需要，您可以使用 element.innerText或 element.textContent。它们在很多方面都不同。如果您选择所看到的内容(呈现的 html)并将其复制到剪贴板，那么 innerText将尝试近似地估计会发生什么情况，而 textContent只是删除 html 标记并给出剩下的内容。

是 支持所有主流浏览器。当然，与 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() {
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.改成 I am working in ABC company.。这些是相同的字符串，所以我看不出有什么理由这样做，但是您可以通过使用 JavaScriptinnerHTML或 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>

不幸的是，这不会改变它，因为它会将其改变为相同的文本。您可以通过更改字符串“ I am working in ABC company.”来碰碰运气别的东西。


提交答案