Katakanlah halaman web memiliki string seperti "Saya adalah string sederhana" yang ingin saya temukan. Bagaimana cara saya menggunakan JQuery?
Katakanlah halaman web memiliki string seperti "Saya adalah string sederhana" yang ingin saya temukan. Bagaimana cara saya menggunakan JQuery?
Jawaban:
jQuery memiliki metode berisi. Ini cuplikan untuk Anda:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
Selektor di atas memilih elemen apa pun yang berisi string target. Foundin akan menjadi objek jQuery yang berisi elemen yang cocok. Lihat informasi API di: https://api.jquery.com/contains-selector/
Satu hal yang perlu diperhatikan dengan wildcard '*' adalah Anda akan mendapatkan semua elemen, termasuk elemen tubuh html Anda, yang mungkin tidak Anda inginkan. Itulah sebabnya sebagian besar contoh di jQuery dan tempat lain menggunakan $ ('div: berisi ("Saya adalah string sederhana")')
Biasanya pemilih jQuery tidak mencari di dalam "node teks" di DOM. Namun jika Anda menggunakan fungsi .contents (), simpul teks akan disertakan, maka Anda bisa menggunakan properti nodeType untuk memfilter hanya simpul teks, dan properti nodeValue untuk mencari string teks.
$ ('*', 'tubuh') .andSelf () .isi() .filter (function () { kembalikan this.nodeType === 3; }) .filter (function () { // Hanya cocok ketika berisi 'string sederhana' di mana saja dalam teks kembalikan this.nodeValue.indexOf ('string sederhana')! = -1; }) .each (function () { // Lakukan sesuatu dengan this.nodeValue });
.andSelf()
. Dari api.jquery.com/andSelf : "objek jQuery memelihara tumpukan internal yang melacak perubahan pada set elemen yang cocok. Ketika salah satu metode traversal DOM dipanggil, set elemen baru didorong ke stack. Jika set elemen sebelumnya juga diinginkan, .andSelf () dapat membantu. " Saya tidak melihat konteks sebelumnya, apa yang saya lewatkan?
Ini akan memilih hanya elemen daun yang mengandung "Saya string sederhana".
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Rekatkan yang berikut ke bilah alamat untuk mengujinya.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
Jika Anda ingin mengambil hanya "Saya adalah string sederhana" . Pertama bungkus teks dalam elemen seperti itu.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
dan kemudian lakukan ini.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
Jika Anda hanya ingin simpul yang paling dekat dengan teks yang Anda cari, Anda bisa menggunakan ini:
$('*:contains("my text"):last');
Ini bahkan akan berfungsi jika HTML Anda terlihat seperti ini:
<p> blah blah <strong>my <em>text</em></strong></p>
Menggunakan pemilih di atas akan menemukan <strong>
tag, karena itu adalah tag terakhir yang berisi seluruh string.
<p>my text <b>my text</b></p>
- menghapus leluhur <b>
tag akan kalah pada pertandingan lainnya
Lihatlah highlight (plugin jQuery).
Hanya menambahkan jawaban Tony Miller karena ini membuat saya 90% menuju apa yang saya cari tetapi masih tidak berhasil. Menambahkan .length > 0;
ke akhir kodenya membuat skrip saya berfungsi.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
fungsi ini harus berfungsi. pada dasarnya melakukan pencarian rekursif sampai kita mendapatkan daftar node daun yang berbeda.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(\""+ search + "\"):not(script)", element);
}
else {
d = $(":contains(\""+ search + "\"):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}