Memanipulasi Teks dengan jQuery: Mendorong Rentetan Khusus
Dalam jQuery, pengguna sering menghadapi keperluan untuk mencari teks tertentu dalam dokumen dan mengubah suainya penampilan. Satu senario biasa ialah menambah penekanan pada teks tertentu dengan menjadikannya tebal.
Pertimbangkan kod jQuery berikut yang cuba memberi semangat kepada frasa tertentu dalam perenggan dengan ID "about_theresidency":
` `
$(window).load(function() {
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});
``
Kod ini bertujuan untuk mencari elemen dengan ID "about_theresidency" yang mengandungi teks "cross genre" dan kemudian menggunakan sifat CSS "font-weight" untuk menebalkan teks khusus tersebut. Walau bagaimanapun, kod ini mungkin tidak berfungsi seperti yang dimaksudkan kerana sifat dinamik teks dalam "about_theresidency."
Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan pendekatan berikut:
var html = $('p').html(); $('p').html(html.replace(/world/gi, '<strong$&</strong>'));
Di sini, kami memanfaatkan kaedah replace() untuk mencari semua kemunculan teks "dunia" dalam perenggan dan menggantikannya dengan teks yang sama yang dikelilingi oleh teg yang kuat. Ini secara berkesan menebalkan teks yang diingini tanpa bergantung pada pemilih :contains jQuery.
Sebagai alternatif, anda boleh menggunakan pemalam jQuery tersuai untuk lebih fleksibiliti:
$.fn.wrapInTag = function(opts) { var tag = opts.tag || 'strong' , words = opts.words || [] , regex = RegExp(words.join('|'), 'gi') // case insensitive , replacement = '<'+ tag +'>$&</'+ tag +'>'; return this.html(function() { return $(this).text().replace(regex, replacement); }); }; // Usage $('p').wrapInTag({ tag: 'em', words: ['world', 'red'] });
Pemalam ini membolehkan anda membungkus mana-mana yang ditentukan teks dalam mana-mana teg HTML yang dikehendaki, memberikan kawalan yang lebih besar ke atas proses manipulasi teks.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menebalkan Teks Khusus Dalam Perenggan Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!