通过javascript获取没有HTML元素的纯文本?

时间:2011-07-19 07:53:35

标签: 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>

当用户点击该按钮时,<p id='txt'>中的内容将成为关注

预期结果:

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

任何人都可以帮我写如何编写javascript函数吗?谢谢。

10 个答案:

答案 0 :(得分:184)

您可以使用:

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

根据您的需要,您可以使用element.innerTextelement.textContent。它们在很多方面有所不同。 innerText试图估算如果你选择你看到的内容(渲染的html)并将其复制到剪贴板会发生什么,而textContent只是剥离html标签并给你剩下的东西。

innerText也与旧的IE浏览器具有兼容性(来自那里)。

答案 1 :(得分:61)

[2017-07-25]因为这仍然是一个公认的答案,尽管这是一个非常hacky的解决方案,我将Gabi的代码加入其中,让我自己的代码作为一个坏的例子

<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>

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

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

答案 2 :(得分:22)

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

$("#txt").text()

答案 3 :(得分:9)

这个答案可以解决任何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;
}

答案 4 :(得分:1)

根据您的需要,您可以使用element.innerTextelement.textContent。它们在很多方面有所不同。 innerText试图估算如果你选择你看到的内容(渲染的html)并将其复制到剪贴板会发生什么,而textContent只是剥离html标签并给你剩下的东西。

innerText is 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;

答案 5 :(得分:0)

这应该有效:

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/

答案 6 :(得分:0)

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

应该这样做。

答案 7 :(得分:0)

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

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

答案 8 :(得分:0)

尝试(Gabi answer想法的简短版本)

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>

答案 9 :(得分:0)

您要将I am working in ABC company.更改为I am working in ABC company.。这些是相同的字符串,所以我看不出原因,但是您可以使用JavaScript innerHTMLtextContent来实现。

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”将不会为粗体。用户将在字面上看到文本“ 这是粗体

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