使用javascript获取文本，排除范围中的不同元素

Question

假设我想从div（Demo）中添加其他内容。

是否可以使用javascript排除范围中的不同元素来获取文本？

为简单起见，让我们使用与Get the pure text without HTML element by javascript?相同的示例，只是即兴创作。

function get_content(){
    var a = txt.innerText || txt.textContent;
    console.log('From #txt:', a, '\n-------\nI want to exclude the following:');
    var classA=document.getElementsByClassName('A');
    console.log(classA[0].textContent);
    var classB=document.getElementsByClassName('B');
    console.log(classB[0].textContent);
    var classC=document.getElementsByClassName('C');
    console.log(classC[0].textContent);

}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

并假设我想分离如何从元素id中获取内容，而不包括span的内容？在示例中是“ Ronald”。

更新：

我正在考虑采用以下方法来实现它们：

var classAlt=document.getElementsByClassName('Alt');
/*If class contains same character with #txt won't work:*/
console.log(a.substr(0, a.indexOf(classAlt[0].textContent.charAt(0))));
/*Haven't found the disadvantage of the following:*/
console.log(txt.childNodes[0].wholeText.trim());

function get_content(){
    var a = txt.innerText || txt.textContent;
    console.log('From #txt:', a, '\n-------\nI want to exclude the following:');
    var classA=document.getElementsByClassName('A');
    console.log(classA[0].textContent);
    var classB=document.getElementsByClassName('B');
    console.log(classB[0].textContent);
    var classC=document.getElementsByClassName('C');
    console.log(classC[0].textContent);
    
    /*I'm thinking of the following: */
    var classAlt=document.getElementsByClassName('Alt');
    /*If class contains same character with #txt won't work:*/
    console.log(a.substr(0, a.indexOf(classAlt[0].textContent.charAt(0))));
    /*Haven't found the disadvantage of the following:*/
    console.log(txt.childNodes[0].wholeText.trim());
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
<span class="Alt">alternative which won't work.</span>
</p>

Answer 1

如果您使用的是jquery，此方法就很好。首先克隆元素，然后删除其中的所有子元素。您的情况是所有span标签。之后，它将文本取回

这是全文的链接 Link

jQuery.fn.justtext = function() {
  
	return $(this)	.clone()
			.children()
			.remove()
			.end()
			.text();

};

console.log($("#txt").justtext());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

否则，这是一种使用纯JavaScript的方法

function extractText(){
  var children = txt.children;
  for (var i = children.length -1; i > -1; i--) {
    children[i].remove();
  }
  console.log(txt.innerHTML)
}

<input type="button" onclick="extractText()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>