Как получить только непосредственно содержащийся текст в элементе DOM в Javascript?

Question

У меня есть div с несколькими дочерними элементами, и он непосредственно содержит текст, как показано ниже:

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

Я хочу получить непосредственно содержащий текст '100 $' в этом элементе DOM.

Я пробовал с 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$ (мне не нужно «для каждого»), который непосредственно содержит текст в родительском элементе. Тогда я могу получить цену и ее валюту.

примечание: 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>