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

我有我的HTML 1button和一些文本如下所示:

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> 

当用户点击button时, <p id='txt'>将成为后续内容

预期结果:

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

任何人都可以帮助我如何编写JavaScript的function? 谢谢。

7 Solutions collect form web for “通过javascript获取没有HTML元素的纯文本?”

[2017-07-25]因为这仍然是被接受的答案,尽pipe是一个非常冒险的解决scheme,我将Gabi的代码join其中,让我自己作为一个坏榜样。

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

你可以使用这个:

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

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

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

如果你可以使用jQuery,那么它很简单

 $("#txt").text() 

这个答案将工作得到任何HTML元素的文本。

这第一个参数“节点”是从中获取文本的元素。 第二个参数是可选的,如果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.innerTextelement.textContent 。 它们在很多方面有所不同。 innerText试图逼近如果你select你所看到的(呈现html)并将其复制到剪贴板将会发生什么,而textContentsorting只是剥离html标签,并给你剩下的东西。

innerText 不仅仅用于IE ,而且在所有主stream浏览器中都支持 。 当然,与textContent不同,它与旧的IE浏览器兼容(因为他们提出了它)。

完整的例子(来自Gabi的回答 ):

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

这应该工作:

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

这应该做到这一点。

  • HTML5文件API读取为文本和二进制文件
  • 如何将工具提示添加到span元素?
  • 是<img>元素块级别还是内联级别?
  • 固定的位置div可滚动
  • 最简单的Facebook风格的“红色”通知的CSS
  • 使用CSS垂直滚动div
  • 在.NET中将HTML转换为PDF
  • 如何强制DIV块扩展到页面的底部,即使它没有内容?
  • 以字母显示文字
  • 如何使所有浏览器都支持<input type =“date”>? 任何替代品?
  • textarea中的Twitter式自动完成