通过javascript获取没有HTML元素的纯文本？ [英] Get the pure text without HTML element by javascript?

问题描述

  function get_content（）{
 //我不知道该怎么做！ 
} 
 
< input type =buttononclick =get_content（）value =获取内容/> 
< p id ='txt'> 
< span class =A>我是< / span> 
< span class =B>在< / span>中工作
< span class =C> ABC公司。< / span> 
< / p> 
  

当用户点击按钮时，< p id ='txt'> 将成为后续

预期结果：

 < p id ='txt'> 
 //< p>中的所有HTML元素将消失
我在ABC公司工作。 
< / p> 
  

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

解决方案

[2017-07-25]因为这仍然是公认的答案， ，我正在将 Gabi 的代码加入其中，让我自己成为一个不好的例子。

 < style> 
 .A {background：blue;} 
 .B {font-style：italic;} 
 .C {font-weight：bold;} 
< / style> 
 
< script> 
 //我的hacky方法：
函数get_content（）{
 var html = document.getElementById（txt）。innerHTML; 
 document.getElementById（txt）。innerHTML = html.replace（/< [>] *> / g，）; 
} 
 // Gabi的优雅方法，但是消除了一个不必要的代码行：
 function gabi_content（）{
 var element = document.getElementById（'txt'）; 
 element.innerHTML = element.innerText || element.textContent; 
} 
 //并利用ID污染窗口名称空间的事实：
函数txt_content（）{
 txt.innerHTML = txt.innerText || txt.textContent; 
} 
< / script> 
 
< input type =buttononclick =get_content（）value =Get Content（bad）/> 
< input type =buttononclick =gabi_content（）value =Get Content（good）/> 
< input type =buttononclick =txt_content（）value =获取内容（最短）/> 
< p id ='txt'> 
< span class =A>我是< / span> 
< span class =B>在< / span>中工作
< span class =C> ABC公司。< / span> 
< / p> 
  

I have the 1 button and some text in my HTML like the following:

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>

When the user clicks the button, the content in the <p id='txt'> will become the follow

Expected Result:

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

Can anyone help me how to write the javascript function? Thank you.

解决方案

[2017-07-25] since this continues to be the accepted answer, despite being a very hacky solution, I'm incorporating Gabi's code into it, leaving my own to serve as a bad example.

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

这篇关于通过javascript获取没有HTML元素的纯文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！