CODEWITHSUNDEEP
jqueryhtmlnode.jscheerio
GadgetGuy
GadgetGuy

Reputation: 469

Get text in parent without children using cheerio

I am trying to extract just the content of a div - without any of the children of that div - using cheerio. If I just use div.text() - I get all the text - parent and children. Here's the HTML - I just want the value "5.25"

The code below currently returns "Purchase price $5.25"

The HTML below:

<div class="outer tile"> 
    < ... various other html here > 
    <div class="cost">
        <span class="text">Purchase price </span>
        <small>$</small>5.25
    </div>
</div>

with the extract of the relevant node.js CHEERIO code below:

var $ = cheerio.load(data);
$("div.outer.tile").each(function(i, e) {
  var price = $(e).find('div.price');
      console.log(price.text());
});

Upvotes: 14

Views: 15669

Answers (4)

fffact
fffact

Reputation: 246

i like this most:

$('div.cost').clone().children().remove().end().text();

which i find more concise (no idea about efficiency). This will clone the element, and then extract the text from it. Removing children in the clone doesn't affect the original element.

source

runkit

Upvotes: 7

ggorlen
ggorlen

Reputation: 56855

If you're sure it's the last text child, you can use:

$(".cost").contents().last().text().trim();

But here's a more general approach than the selected answer (I avoid using .first() and trim the text):

import cheerio from "cheerio";

const html = `
<div class="outer tile">
  <div class="cost">
    <span class="text">Purchase price </span>
    <small>$</small>5.25
  </div>
</div>
`;
const $ = cheerio.load(html);

const result = [...$(".cost").contents()]
  .filter(e => e.type === "text" && $(e).text().trim())
  .map(e => $(e).text().trim())
  .join(""); // optional
console.log(result);

See also:

Upvotes: 0

Evers
Evers

Reputation: 1908

Anyone still wondering how to do this in Cheerio:

$('div.classname').first().contents().filter(function() {
    return this.type === 'text';
}).text();

Upvotes: 24

mickadoo
mickadoo

Reputation: 3483

I used this post

Get the text after span element using jquery

as reference to make a fiddle

http://jsfiddle.net/TKwhY/

It was new to me, but you can get text nodes by returning only elements of nodeType 3

var a = $('.cost').first().contents().filter(function() {
    return this.nodeType == 3;
});

Upvotes: 0

Related Questions