Bagaimanakah Saya Boleh Menebalkan Rentetan Teks Khusus Dalam Perenggan Menggunakan jQuery?

Tebal Rentetan Teks dalam jQuery

Anda sedang mencari penyelesaian jQuery untuk menyerlahkan rentetan teks tertentu dalam perenggan dengan menebalkannya. Walau bagaimanapun, kod anda tidak menghasilkan hasil yang diingini:

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

Kod ini bertujuan untuk menyasarkan teks dengan frasa "genre silang" dalam elemen dengan ID "about_theresidency" dan menggunakan sifat CSS "font -berat" untuk menjadikannya berani. Walau bagaimanapun, ia tetap tidak berkesan.

Penyelesaian

Untuk rentetan teks tebal menggunakan jQuery, anda boleh menggunakan kaedah replace() bersama-sama dengan html(). Kod berikut menunjukkan cara:

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

Coretan kod ini:

1. Menyimpan kandungan HTML perenggan dalam pembolehubah html.
2. Menggunakan replace( ) kaedah pada html untuk mencari semua kemunculan teks "dunia" (tidak peka huruf besar-besaran) dan membungkusnya dalam <strong> tag.
3. Mengemas kini kandungan HTML perenggan dengan rentetan yang diubah suai untuk menggunakan pemformatan tebal.

Petua Tambahan

Kod boleh diperhalusi menjadi pemalam:

$.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 perkataan tertentu dalam HTML tag. Dalam contoh yang disediakan, ia membungkus perkataan "dunia" dan "merah" dalam <em> tanda nama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menebalkan Rentetan Teks Khusus Dalam Perenggan Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!