2

私はdivを次のように設定しています：

<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>

編集：明確にするために、これは最も簡単な例です。divには、任意の数のn個の深いネストされた子を含めることができます。

$('#test').getText()'HelloGoodbye'を返します。Firebugでテストする1つのライナーは次のとおりです。jQuery('<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>').text()

これは、jQueryが内部で使用するtextContent（IE以外の場合）がテキストの一部として非表示の要素を返すためと思われます。ふむ

display：none'd要素を無視してテキストコンテンツを返す方法はありますか？基本的に、マウスでdivを強調表示し、システムクリップボードにコピーすることで得られるテキストを模倣しようとしています。それは隠されたテキストを無視します。

興味深いことに、選択範囲を作成してそこからテキストを取得すると、display：none要素内のテキストも返されます。

var range = document.body.createTextRange();
range.moveToElementText($('#test')[0]);
range.select();

console.log(range.toString()); // Also logs Hello Goodbye!

したがって、ドキュメントの選択範囲を作成することは、display：none要素に関してマウスで強調表示することと同じことをするようには見えません。この汚れたピクルスの難問を回避するにはどうすればよいですか？

編集：使用.filter(':visible').textが提案されていますが、このシナリオでは機能しません。返されるテキストは、マウスでの選択から得られるものとまったく同じである必要があります。したがって、たとえば：

$('<div>test1 <p>test2</p>\r\n <b>test3</b> <span style="display:none">none</span></div>').appendTo(document.body).children().filter(':visible').text()

戻り値

"test2test3"

私が実際に欲しい出力は

test1 test2
 test3

\ r \ nに由来する改行、空白、その他すべて

4

6 に答える 6

4

を使用して要素をフィルタリングします.filter(":visible")。

またはこれを使用してください：

$("#test :visible").text();

ただし、jQueryのドキュメント.filter()では、代わりに次のものを使用することをお勧めしています。

:visibleはjQuery拡張機能であり、CSS仕様の一部ではないため、を使用するクエリは、ネイティブDOMメソッドによって提供されるパフォーマンスの向上を利用できませ:visibleん。querySelectorAll()：visibleを使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋なCSSセレクターを使用して要素を選択し、次にを使用します.filter(":visible")。

于 2011-09-12T01:00:50.040 に答える
2

セレクターで次のように使用:visibleします。

$("#test > p:visible").text()

関数の例：

- 編集：

http://jsfiddle.net/8H5ka/（Chromeで動作 し、結果に「こんにちは」と表示されます）

上記が機能しない場合：

http://jsfiddle.net/userdude/8H5ka/1/

于 2011-09-12T01:03:07.517 に答える
1

スペースが大きな問題ではない場合は、マークアップをコピーし、非表示の要素を削除して、そのテキストを出力できます。

var x = $('#test').clone();
x.filter(':not(:visible)').remove();
return x.text();
于 2011-09-12T02:09:30.433 に答える
0

私はこの問題を抱えていて、この質問を見つけました。実際の解決策は提供された回答に基づいているようですが、実際には書き出されていません。これが私の状況で機能した完全なソリューションです。これはOPと同じですが、DOMの位置に基づく外部スタイルのために要素が表示されない可能性があるという追加の規定があります。例：

<style>.invisible-children span { display: none; }</style>
<div class="invisible-children">
  <div id="test">Hello <span>Goodbye</span></div>
</div>

解決策は次のとおりです。

  1. オブジェクト全体のクローンを作成します。
  2. 見えないオブジェクトを所定の位置に削除します。非表示のオブジェクトを削除する#test前にDOMを削除すると、CSSルールに一致しなくなるため、jQueryはそれらが非表示であることを認識しない可能性があります。
  3. オブジェクトのテキストを取得します。
  4. 元のオブジェクトを作成したクローンに置き換えます。

コード：

var $test = $('#test');
// 1:
var $testclone = $test.clone();
// 2: We assume that $test is :visible and only remove children that are not.
$test.find('*').not(':visible').remove();
// 3:
var text = $test.text();
// 4:
$test.replaceWith($testclone);
// Now return the text...
return text;
// ...or if you're going to keep going and using the $test variable, make sure
// to replace it so whatever you do with it affects the object now in DOM and
// not the original from which we got the text after removing stuff.
$test = $testclone;
$test.css('background', 'grey'); // For example.
于 2012-07-31T22:11:19.380 に答える
0

これが私がMooToolsでそれをした方法です：

$extend(Selectors.Pseudo, {
    invisible: function() {
        if(this.getStyle('visibility') == 'hidden' || this.getStyle('display') == 'none') {
            return this;
        }
    }
});

Element.implement({
    getTextLikeTheBrowserWould = function() {
        var temp = this.clone();
        temp.getElements(':invisible').destroy();
        return temp.get('text').replace(/ |&amp;/g, ' ');
    }
})
于 2012-07-31T23:18:34.140 に答える
0

私はそれを検索し、この質問を見つけましたが、解決策はありません。私にとっての解決策は、jqueryから抜け出してDOMを使用することです。

var $test = $('#test').get(0).innerText

または、セレクターの配列内の要素よりも多い場合は、forループとマージが必要ですが、ほとんどの場合、これが必要な最初のバージョンであると思います。

var $test = $('#test').get().map(a => a.innerText).join(' ');
于 2019-03-16T10:23:50.890 に答える