子要素のテキストを含まず、指定要素のテキストのみを抽出する方法

Question

前提・実現したいこと

・以下のHTMLから 72円 というテキストのみ抜き出したいと考えています。

<p class="product-cart-price">  
　　<span class="only-sp product-cart-small-text">小計(税込)</span>
　　72円
</p>

恐れ入りますが、もしお分かりの方がいらっしゃればご教授頂けますと幸いです。

試したこと・発生している問題

以下では undefined になってしまいました。

console.log($(".product-cart-price>:not(span)").text());
$(".product-cart-price>:not(.product-cart-price>span)").text()

以下では 小計(税込) 72円 と出力されてしまいました。

console.log($(".product-cart-price:not(span)").text());

補足情報（FW/ツールのバージョンなど）

・jQuery v3.3.1 を使用しています。

Comments

[x_x]

CSS は関係ないのでは？

Answer 1

jQuery API のノード参照範囲は(基本的に)要素ノードだけです。
テキストノードは DOM API を使って、参照して下さい。

document.querySelector('.product-cart-price').lastChild.data

Re: yassoreeni さん

Comments

[yassoreeni]

ありがとうございます！
jQueryの参照範囲は存じませんでした。
勉強になります。

Answer 2

かなり微妙な方法なので、ほかの人がもっといい方法を教えてくれるかもしれません。

console.log($($(".product-cart-price")[0].outerHTML).children().empty().parent().text().trim());

Comments

[yassoreeni]

教えて頂き、誠にありがとうございます！
jQueryを用いる場合はこのようになるんですね。
参考にさせていただきます。

Answer 3

var result = $.trim($(".product-cart-price")
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  }).text());
console.log(result);

https://api.jquery.com/contents/

Comments

[yassoreeni]

jQueryでの方法をご教授頂き、ありがとうございます。勉強になります。
また、タイトルの方も修正させていただきます。

Answer 4

DOMで処理するならこう

<script>
$(function(){
  var str=$('.product-cart-small-text').get(0).nextSibling.nodeValue.trim();
  console.log(str);
});
</script>
<p class="product-cart-price">  
　　<span class="only-sp product-cart-small-text">小計(税込)</span>
　　72円
</p>

Comments

[yassoreeni]

ご教授頂き、誠にありがとうございます。こちらのやり方も参考にさせていただきます。