Pilih tautan dengan teks (sama persis)

89

Menggunakan jQuery, saya ingin memilih tautan yang berisi persis semacam teks. Sebagai contoh:

<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>

Saya sudah mencoba ini:

$('a:contains("This One")')

Tapi itu memilih tautan pertama DAN kedua. Saya hanya ingin tautan pertama, yang berisi persis "Yang Ini". Bagaimana saya bisa melakukan itu?

Endy Tjahjono
sumber
Kemungkinan duplikat elemen Select berdasarkan konten teks yang TEPAT
Steve Chambers

Jawaban:

139

Kamu bisa melakukan ini:

$('a').filter(function(index) { return $(this).text() === "This One"; });

Referensi: http://api.jquery.com/filter/

IkanBasketGordo
sumber
5
Entah akan bekerja dalam kasus ini, tetapi saya cenderung menggunakan === karena cocok pada nilai dan jenis, yaitu tidak akan memaksa jenis. stackoverflow.com/questions/359494/…
FishBasketGordo
1
Anda melewatkan return. Saya harus mengubahnya menjadifunction(index) { return (this.text === 'This One') }
Endy Tjahjono
Selain itu, Anda dapat memeriksa panjang teks.
bestinamir
39

Seorang rekan kerja saya memperluas jQuery dengan fungsi untuk melakukan ini:

$.expr[':'].textEquals = function(a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

Hasilnya adalah Anda dapat memilih sesuatu dengan teks persis seperti ini:

$("label:textEquals('Exact Text to Match')");

Ini membuatnya mudah, karena Anda tidak perlu mengingat sintaks persis setiap saat. Seluruh posnya ada di sini: jQuery Custom Selector untuk memilih elemen dengan teks yang tepat: textEquals

Narnian
sumber
28

Untuk memperluas jawaban FishBasketGordo. Jika Anda mencoba membuat pilihan pada banyak elemen, gunakan :contains()pertama untuk mempersempit dan kemudian terapkan filter.

Ini akan meningkatkan kecepatan keseluruhan:

$('a:contains("This One")').filter(function(index)
{
    return $(this).text() === "This One";
});
djhansel
sumber
Dipilih untuk kecepatan / efisiensi. Juga, hindari kebutuhan $ .trim () spasi di dalam .filter (..).
JoePC
8

harus memodifikasi solusi Nariman menjadi:

$.expr[':'].textEquals = function(a, i, m) {
    var match = $(a).text().match("^" + m[3] + "$")
    return match && match.length > 0;                                                                                                                                                                                                                                            
}

Jika tidak, tidak berfungsi di chrome (Linux)

Pemanah
sumber
6

Saya menggunakan ekstensi

$.expr[':'].textEquals

Tetapi saya telah menemukan bahwa implementasinya tidak lagi berfungsi dengan jQuery 1.7 (tampaknya merupakan perubahan di Sizzla.filter). Setelah berjuang selama beberapa waktu untuk membuatnya bekerja, saya hanya menulis plugin jQuery untuk mencapai hal yang sama.

$.fn.textEquals = function (text) {
    var match = false;
    $(this).each(function () {
        if ($(this).text().match("^" + escapeRegex(text) + "$")) {
            match = true;
            return false;
        }
    });
    return match;
};

Menggunakan:

$(".ui-autocomplete li").textEquals('Exact Text to Match');

Hanya ingin berbagi, jika ada orang lain yang mengalami ini (,

Alvis
sumber
3

Jadi, jawaban Narnian bekerja dengan cukup baik. Namun, menggunakannya di alam liar, saya mengalami beberapa masalah, di mana hal-hal yang saya harapkan dapat ditemukan tidak ditemukan. Ini karena terkadang ada spasi kosong acak yang mengelilingi teks elemen. Menurut saya, jika Anda mencari "Hello World", Anda pasti ingin kata itu cocok dengan "Hello World", atau bahkan "Hello World \ n". Jadi, saya baru saja menambahkan metode "trim ()" ke fungsi tersebut, yang menghapus spasi di sekitarnya, dan itu mulai bekerja lebih baik. Juga, saya memodifikasi nama variabel menjadi sedikit lebih jelas bagi saya.

Secara khusus...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

Dan catatan sekunder ... trim hanya menghapus spasi sebelum dan sesudah teks yang dicari. Itu tidak menghapus spasi di tengah kata. Saya yakin ini adalah perilaku yang diinginkan, tetapi Anda dapat mengubahnya jika Anda mau.

bwest87
sumber
3
$('a:contains("This One")')[0];

Saya merasa seperti saya kehilangan sesuatu berdasarkan jawaban orang lain untuk disaring, tetapi mengapa tidak memilih item pertama dalam larik elemen yang dikembalikan oleh 'berisi'?

Ini berfungsi, hanya jika Anda tahu bahwa tautan pertama memiliki kecocokan persis dengan yang Anda cari. Jawaban lain berfungsi lebih baik, jika Anda tidak yakin di urutan mana tautan itu berada.

Michael Khalili
sumber
Karena dia tidak selalu tahu yang dia inginkan adalah yang pertama
Cameron
Pertanyaannya secara khusus menanyakan "Saya hanya ingin tautan pertama".
Michael Khalili
Pertanyaan menanyakan pencocokan tepat, penulis menunjukkan elemen pertama untuk menjelaskan elemen mana yang diinginkan.
dlopezgonzalez
2

Cara mendapatkan nilai yang dipilih dari drop-dwon:

$.fn.textEquals = function (text) {
    var match = false; 
    var values="";
    $(this).each(function () {
        if ($(this).text().match("^" + text + "$")) {
            values=$(this).val();
            match = true;
            return false;
        }
    });
    return values;
};

console.log($("option").textEquals("Option One")); - ini akan mengembalikan nilai drop-down

Iulia Lucaciu
sumber
2
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');
David Fawzy
sumber
1
Tolong tambahkan penjelasan untuk jawaban Anda.
Michał Perłakowski
baris pertama untuk memilih tautan apa pun dengan teks itu, baris kedua dan ketiga apa yang dapat Anda lakukan dengan tautan untuk menyembunyikannya atau menonaktifkan tautan lihat filter di dokumentasi jquery api.jquery.com/filter
David Fawzy
@DavidFawzy - maaf, umm ... apa ?? Saya tidak berpikir baris ke-2 atau ke-3 ada hubungannya dengan pertanyaan OP - itu hanya menambah kebingungan.
jbyrd
2

Maaf, jika ini sama persis dengan jawaban siapa pun di atas,

   $.fn.equalsText = function (text, isCaseSensitive) {
      return $(this).filter(function () {
         if (isCaseSensitive) {
            return $(this).text() === text
         } else {
            return $(this).text().toLowerCase() === text.toLowerCase()
         }
      })
   }

Berikut adalah beberapa output di konsol halaman hasil penelusuran Linkedin.

$("li").equalsText("Next >", false)
[<li class="next">​…​</li>​] // Output

$("li").equalsText("next >", false)
[<li class="next">​…​</li>​] // Output

$("li").equalsText("Next >", true)
[<li class="next">​…​</li>​] // Output

$("li").equalsText("next >", true)
[] // Output

Ini memiliki dukungan sensitivitas huruf besar juga dan tidak digunakan :contains()

Edit (22 Mei 2017): -

   $.fn.equalsText = function (textOrRegex, isCaseSensitive) {
      return $(this).filter(function () {
         var val = $(this).text() || this.nodeValue
         if (textOrRegex instanceof RegExp) {
            return textOrRegex.test(val)
         } else if (isCaseSensitive) {
            return val === textOrRegex
         } else {
            return val.toLowerCase() === textOrRegex.toLowerCase()
         }
      })
   }
Vikas Gautam
sumber