如何仅获取 Javascript 中 DOM 元素中直接包含的文本？

Question

我有一个 div 里面有一些孩子，它直接包含如下文本：

<div id="price">
   100$
   <span>some ads</span>
   <span>another ads</span>
   for each
</div>

我想在这个 DOM 元素中直接包含文本“100$”。

我尝试使用innerHTML 、 innerText和textContent 。 但它们显示所有文本，包括儿童文本，如下所示：

 const element = document.getElementById('price'); console.log(element.innerText); console.log(element.innerHTML); console.log(element.textContent);

 <div id="price"> 100$ <span>some ads</span> <span>another ads</span> for each </div>

预期结果是100$ （我不需要“for each”），它直接包含在父元素中的文本。 所以我可以得到价格和它的货币。

注：jquery也允许使用。

Answer 1

.clone()克隆选定的元素。

.children()从克隆元素中选择子元素

.remove()删除先前选择的子项

.end()再次选择被选元素

.text()从没有子元素的元素中获取文本

 const elementText = $("#price").clone().children().remove().end().text(); console.log(elementText.trim().split("\n")[0]);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> Parent <span>Child 1</span> <span>Child 2</span> </div> <div id="price"> 100$ <span>some ads</span> <span>another ads</span> for each </div>

编辑：你也可以使用这个：

$("#price").contents().get(0).nodeValue.trim()

Answer 2

过滤childNodes以仅包含文本节点并使用每个匹配节点的textContent ：

const text = Array.prototype.filter
    .call(element.childNodes, (child) => child.nodeType === Node.TEXT_NODE)
    .map((child) => child.textContent)
    .join('');

text包括文本的完整标记，包括换行符。 如果这是不希望的，请使用text.trim() 。

使用filter.call是因为childNodes是一个NodeList ，它类似于数组，但不支持.filter方法。

---

仅获取第一个节点的文本

const text = Array.prototype.filter
    .call(element.childNodes, (child) => child.nodeType === Node.TEXT_NODE)[0];

或者，如果您可以依赖该值始终是第一个孩子这一事实，则上述内容可以简化为

const text = element.childNodes[0];

Answer 3

使用 jQuery：

const text = $($('#price').contents()[0]).text().trim();

Answer 4

您可以使用“outerText”属性执行此操作。 如下例所示：

 var text = document.querySelector('body').outerText; var regex = /([\d]+)\$/g; console.log(text.match(regex).join());

 <div id="price"> 100$ <span>some ads</span> <span>another ads</span> for each </div>