Bagaimanakah Saya Boleh Memilih Nod Teks dengan Cekap dalam Elemen Menggunakan jQuery atau JavaScript Tulen?

Memilih Nod Teks dengan jQuery

Memilih nod teks dalam elemen boleh menjadi tugas yang mencabar dalam jQuery. Nasib baik, terdapat pelbagai pendekatan yang tersedia untuk mencapai matlamat ini.

Pendekatan 1: Menggabungkan Kandungan() dan Cari()

jQuery tidak menyediakan fungsi khusus untuk memilih nod teks. Walau bagaimanapun, penyelesaian melibatkan penggunaan kaedah contents(), yang mendapatkan semula nod anak termasuk nod teks dan menggabungkannya dengan kaedah find(), yang memilih elemen turunan tetapi mengecualikan nod teks.

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

Nota: Untuk versi jQuery sebelum 1.7, gantikan addBack() dengan andSelf(), dan untuk versi 1.8 atau lebih baru, gunakan addBack().

Pendekatan 2: Penyelesaian DOM Tulen

Jika anda lebih suka penyelesaian yang lebih cekap, kaedah bukan jQuery boleh digunakan. Ini melibatkan fungsi rekursif yang merentasi pepohon DOM:

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;
}

Contoh Penggunaan

Kedua-dua pendekatan membolehkan anda mendapatkan semula semua nod teks dalam elemen yang ditentukan.

var textNodes = getTextNodesIn(el);

Dengan menyesuaikan parameter includeWhitespaceNodes, anda boleh memilih sama ada ruang kosong atau tidak nod teks disertakan dalam hasilnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Nod Teks dengan Cekap dalam Elemen Menggunakan jQuery atau JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!