CODEWITHSUNDEEP
javascriptjqueryhtml
Diamond
Diamond

Reputation: 3428

How to get only directly contained text in DOM element in Javascript?

I have a div with some children within and its directly contained text like below:

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

I want to get directly contained text '100$' in this DOM element.

I tried with innerHTML, innerText and textContent. But they show all text including children's text like below:

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>

The expected result is 100$(I don't need "for each") which is directly contained text in parent element. So then I can get the price and its currency.

note: jquery is also allowed to use.

Upvotes: 8

Views: 9266

Answers (5)

duxonem
duxonem

Reputation: 1

HTMLElement.prototype.directText=function (){
  let el=this.cloneNode(true);
  while (el.children[0]) el.children[0].remove();
  return el.textContent;
}

So we can use:

let directText=document.getElementById('id').directText();

Upvotes: 0

Ricardo Ferreira
Ricardo Ferreira

Reputation: 616

You can do this using the "outerText" property. Like in the example below:

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>

Upvotes: 0

Marko Gresak
Marko Gresak

Reputation: 8197

Filter the childNodes to include only text nodes and use textContent of each of the matching nodes:

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

The text includes the full markup of the text, including newlines. If this is undesired, use text.trim().

The filter.call is used because childNodes is a NodeList, which is array-like, but does not support .filter method.

To get text only for the first node

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

Alternatively, if you can rely on the fact that the value is always the first child, the above can be simplified to

const text = element.childNodes[0];

Upvotes: 7

nircraft
nircraft

Reputation: 8468

.clone() clones the selected element.

.children() selects the children from the cloned element

.remove() removes the previously selected children

.end() selects the selected element again

.text() gets the text from the element without children

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>

EDIT: You can also use this:

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

Upvotes: 8

EddiGordo
EddiGordo

Reputation: 686

With jQuery :

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

Upvotes: 0

Related Questions