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

javascript html

2022-08-30 02:42:18

我在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函数吗？

谢谢。

答案 1

您可以使用以下命令：

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

根据需要，可以使用或。它们在很多方面有所不同。innerText试图近似地描述如果你选择你看到的内容（呈现的html）并将其复制到剪贴板会发生什么，而textContent只是剥离html标签并给你剩下的东西。element.innerTextelement.textContent

innerText还具有与旧IE浏览器（来自那里）的兼容性。

答案 2

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