javascript - jQuery ile metin düğümlerini nasıl seçerim?

Bir elementin tüm alt metin düğümlerini jQuery koleksiyonu olarak almak istiyorum. Bunu yapmanın en iyi yolu nedir?

Cevap #1

jQuery bunun için uygun bir işleve sahip değil. Sadece çocuk düğümleri veren ancak metin düğümlerini de içeren contents() ile, tüm alt öğeleri veren ancak metin düğümleri vermeyen find()'i birleştirmeniz gerekiyor. İşte benim bulduğum çözüm:

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

Not: Eğer jQuery 1.7 veya öncesini kullanıyorsanız, yukarıdaki kod çalışmayacaktır. Bunu düzeltmek için addBack() yerine andSelf() kullanın. andSelf(), 1.8 ve sonrasında addBack() lehine kullanımdan kaldırılmıştır.

Bu, saf DOM yöntemleriyle karşılaştırıldığında bir nebze verimsizdir ve jQuery'nin contents() fonksiyonunu aşırı yüklemesi için çirkin bir geçici çözüm içermek zorundadır (bunu yorumlarda belirten @rabidsnail'a teşekkürler), bu yüzden işte basit bir özyinelemeli fonksiyon kullanarak jQuery dışı bir çözüm. includeWhitespaceNodes parametresi, çıktıdaki boşluk metin düğümlerinin dahil edilip edilmeyeceğini kontrol eder (jQuery'de bunlar otomatik olarak filtrelenir).

Güncelleme: includeWhitespaceNodes yanlış olduğunda hata düzeltildi.

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

Cevap #2

Jauco bir yorumda iyi bir çözüm paylaştı, bu yüzden onu buraya kopyalıyorum:

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });

Cevap #3

$('body').find('*').contents().filter(function () { return this.nodeType === 3; });

İlgili makaleler