jQueryを使用して段落内の特定のテキストを太字にするにはどうすればよいですか?

jQuery を使用したテキストの操作: 特定の文字列の強調

jQuery では、ユーザーはドキュメント内で特定のテキストを見つけてそのテキストを変更する必要があることがよくあります。外観。一般的なシナリオの 1 つは、特定のテキストを太字にして強調することです。

ID が「about_theresidency」の段落内の特定の語句を太字にしようとする次の jQuery コードを考えてみましょう。

` `
$(window).load(function() {
$('#about_theresidency:contains("crossジャンル")').css({'font-weight':'bold'});
});
``

このコードは、ID「about_theresidency」を持つ要素を検索することを目的としています。これには「クロスジャンル」というテキストが含まれており、CSS プロパティ「font-weight」を適用してその特定のテキストを太字にします。ただし、「about_theresidency」のテキストの動的な性質により、このコードは意図したとおりに動作しない可能性があります。

この問題を解決するには、次のアプローチの使用を検討してください。

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

ここでは、 replace() メソッドを利用して、段落内に出現するテキスト「world」をすべて検索し、それらを強力なタグで囲まれた同じテキストに置き換えます。これにより、jQuery の :contains セレクターに依存せずに、目的のテキストを効果的に太字にすることができます。

あるいは、カスタム jQuery プラグインを利用して柔軟性を高めることもできます。

$.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']
});

このプラグインを使用すると、指定されたテキストをラップできます。テキストを任意の HTML タグに含めることで、テキスト操作プロセスをより詳細に制御できるようになります。

以上がjQueryを使用して段落内の特定のテキストを太字にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。