如何使用JavaScript获取没有HTML元素的纯文本？
如何使用JavaScript获取没有HTML元素的纯文本？
提问于 2011-07-19 15:53:35
我的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>当用户点击该按钮时，<p id='txt'>中的内容将变成如下预期结果：
<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>有人能帮我写JavaScript函数吗？
谢谢。
回答 9
Stack Overflow用户
回答已采纳
发布于 2011-07-19 16:08:03
2017-07-25由于这仍然是公认的答案，尽管这是一个非常老套的解决方案，但我将Gabi的代码加入其中，留下我自己的代码作为一个糟糕的例子。
// 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>
Stack Overflow用户
发布于 2011-07-19 15:58:46
您可以使用以下命令：
var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;根据您的需要，您可以使用element.innerText或element.textContent。它们在许多方面都不同。如果您选择所看到的内容(呈现的html)并将其复制到剪贴板上，innerText会尝试近似地估计会发生什么，而textContent只会剥离html标记并给出剩下的内容。
innerText还具有与旧的IE浏览器(来自那里)的兼容性。
Stack Overflow用户
发布于 2011-07-19 16:07:14
如果可以使用jquery，那就很简单了
$("#txt").text()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6743912
复制相关文章
相似问题
腾讯云开发者
