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

Question

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

谢谢。

Answer 1

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

Answer 2

您想将I am working in ABC company. 更改为I am working in ABC company.。这些是相同的字符串，所以我没有理由这样做，但您可以使用 JavaScript innerHTML 或 textContent 来完成此操作。

element.innerHTML 是一个定义元素内部 HTML 的属性。如果您输入element.innerHTML = "<strong>This is bold</strong>，它将使文本“This is bold”变为粗体。

element.textContent，另一方面，设置元素中的文本。如果你使用element.textContent = "<strong>This is bold</strong>，文本“This is bold”将不会是粗体。用户将看到文字“This is bold

在您的情况下，您可以使用任何一种。我将使用.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 公司工作”来实现这一点。到别的东西。

Answer 3

试试（加比的短版answeridea）

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>

Answer 4

这对我有用，是根据这里所说的以更现代的标准编译的。这最适合多次查找。

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

Answer 5

你可以用这个：

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

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

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

Answer 6

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

innerTextis not just used for IE anymore，是supported in all major browsers。当然，与textContent不同的是，它与旧的IE浏览器兼容（因为他们想出了它）。

完整示例（来自Gabi's answer）：

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

Answer 7

此答案将仅用于获取任何 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;
}

Answer 8

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

$("#txt").text()

Answer 9

function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

应该可以的。

Answer 10

应该可以的：

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/