Bagaimanakah Saya Boleh Menemukan Teks Khusus dan Tebal Dengan Amanah Dalam Elemen jQuery?

Mengubah suai Elemen Teks dengan jQuery: Cari dan Beranikan

Dalam jQuery, adalah perkara biasa untuk memanipulasi elemen DOM secara dinamik. Satu tugas sedemikian melibatkan mencari teks tertentu dalam elemen tertentu dan mengubah suai penampilannya, seperti menebalkannya.

Pertimbangkan kod berikut:

$(window).load(function() {
  // ADD BOLD ELEMENTS
  $('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

Dalam contoh ini, kami cuba untuk cari teks "genre silang" dalam elemen dengan ID "about_theresidency" dan gunakan CSS untuk menjadikannya tebal. Walau bagaimanapun, pendekatan ini mungkin tidak memberikan hasil yang diinginkan. Untuk memahami sebabnya, mari kita terokai penyelesaian alternatif:

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));

Pendekatan ini menggunakan kaedah replace() untuk mengenal pasti dan menggantikan teks "world" dengan teg HTML tebal. Ini adalah cara yang lebih dipercayai untuk mencari dan mengubah suai teks tertentu kerana:

• Ia menyasarkan keseluruhan kandungan HTML elemen, bukan hanya nod teks langsungnya.
• Ia menggunakan ungkapan biasa (/world/gi) untuk melakukan carian tidak sensitif huruf besar dan penggantian global.

Anda juga boleh membuat pemalam boleh guna semula untuk mengendalikan perkara ini fungsi:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // Case insensitive
    , replacement = '$&'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

Penggunaan:

$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

Pemalam ini membolehkan anda membungkus perkataan tertentu dengan mudah dalam elemen yang diberikan dengan mana-mana teg HTML.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menemukan Teks Khusus dan Tebal Dengan Amanah Dalam Elemen jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!