【jQeury】テキストが入っている要素のみ取得したい

前提・実現したいこと

【テキストが入っている要素のみ取得したい】

先日、こちらでテキストが入っている要素を取得する方法をご教授頂いたのですが、その方法だとテキストが入っている要素にbrタグが入っていたり、<p>テキスト<span>テキスト</span></p>のような要素の状態だと取得出来ないことに気づきました。

これらの問題を解決するために、childeren()で子要素を指定する時にnot()でbrタグを指定したら、brタグが入っている場合でも取得することが出来ました。

しかし、<外の要素>テキスト<中の要素>テキスト</中の要素></外の要素>のような場合はパターンが無限にあるのでnot()では対応出来ないことに気づきました...

他にいい方法等がありましたらぜひご教授下さい。。。

使用言語：jQuery　バージョン1.11.2

ご教授頂いたソースコード

var getEleInText = $(".wrap *").filter(function(){
	return $(this).text()!==""&&$(this).children().length==0;
});

brを除外したソースコード

var getEleInText = $(".wrap *").filter(function(){
	return $(this).text()!==""&&$(this).children().not("br").length==0;
});

以下追記

・過去の質問　https://teratail.com/questions/111194

yambejp 様

下記のように、要素に複数のテキストが入っている場合、そのテキストごとに取得をし、
要素直下にテキストが入っていない場合、その要素は取得したくないと考えております。

<p>テキスト<!--取得したい-->
	<span>テキスト</span><!--取得したい-->
</p>

<dl><!--取得したくない-->
	<dt><!--取得したくない-->
		<h3>テキスト</h3><!--取得したい-->
	</dt>
	<dd><!--取得したくない-->
		<p>テキスト<!--取得したい-->
			<span>テキスト</span><!--取得したい-->
		</p>
	</dd>
</dl>

kei344 様

最終的に「ブックマークレットでjsを実行してcssの記述を書き出す」の理由ですが、
コーディング時、psd等のカンプのテキストとフォントサイズやテキストカラーが合っているかの確認する作業の工数削減が最終的な目的です。
検証ツールで要素を一つづつ確認するのではなく、一気に確認出来るようにしたいと思っています。

yambejp

2018/01/31 03:45 編集

なんかダブった・・

yambejp

2018/01/31 03:45

もう少し具体的なサンプルで、どういう場合は拾ってどういう場合は拾わないかhtmlを提示してください

kei344

2018/01/31 03:48

https://teratail.com/questions/111194 前回の質問へのリンクは書かれたほうが良いです。また、何のためにCSSの記述を書き出すかも追記していただけませんか？

退会済みユーザー

2018/01/31 04:39

先程追記依頼の対応完了しました。ご指摘いただきありがとうございました。

行動規範の内容に同意します

回答3件

JavaScript
1var getEleInText = $(".wrap *").contents().filter(function() {
2	return this.nodeType === 3 && this.nodeValue.trim() !== '';
3}).parent();

投稿2018/01/31 05:59

x_x

総合スコア13749

結局は、** 直下にテキストノードがあるエレメントを判別 ** できればよいということですかね？

であれば、以下が参考になるかと
http://shanabrian.com/web/jquery/get-text-node.php

下記もよさそうです
https://gist.github.com/RyoSugimoto/8910793

あとは既存の回答と組み合せればできそうじゃないですかね？

追記

ちなみに、質問者さんのやりたいことを考えると、以下方針のほうがよい気もしました。
0. 先に.wrap内のテキストノードのみすべて取得
0. 取得したテキストノードの親要素を取得
0. 上記で取得した親要素のstyleを取得、加工する

AsIsの実装はアプローチが逆ですよね？ソース読み込んだわけではないので、なんか理由があるのかもしれませんが。。。

投稿2018/01/31 04:46

編集2018/01/31 06:51

h_daido

総合スコア824

ベストアンサー

無理やりやってみました

javacript
1$(function(){
2  $('body *').filter(function(){
3    return ($(this).clone()).children().remove().end().text().replace(/\s/g,'')!=="";
4  }).each(function(){
5    console.log($(this).attr('id'));
6  });
7});

HTML
1<body>
2<p id="x1">テキスト
3    <span id="x2">テキスト</span>
4</p>
5<dl id="x3">
6    <dt id="x4">
7        <h3 id="x5">テキスト</h3>
8    </dt>
9    <dd id="x6">
10        <p id="x7">テキスト
11            <span id="x8">テキスト</span>
12        </p>
13    </dd>
14</dl>
15</body>