jQuery を使用して動的に読み込まれるコンテンツ内の特定のテキスト文字列を効率的に太字にするにはどうすればよいですか?

jQuery を使用したテキスト文字列の検索と太字

要素内で特定のテキスト文字列を検索し、その外観を変更することは、要素内で作業する場合の一般的なタスクです。動的なコンテンツ。 jQuery では、これを効率的に実現できます。ただし、最初のアプローチで望ましい結果が得られない場合は、トラブルシューティングを行って解決策を見つけてください。

あなたが提供したコード スニペットは、ID が「」の要素内に文字列「cross ジャンル」を含むテキストを太字にすることを目的としています。居住地について。」意図は明らかですが、その実装には小さなエラーがあります:

$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});

問題は ":contains" セレクターにあり、説明したようにテキストが動的にロードされるとうまく機能しません。 。目的のテキストを効果的にターゲットにするには、replace() 関数を html() と組み合わせて使用​​します。

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

このコードは、「クロスジャンル」テキストを強力なタグ バージョンに置き換え、効果的に太字にします。

または、この機能をカプセル化するカスタム プラグインを作成することもできます。

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

これを使用すると、プラグインでは、wrapInTag() メソッドを使用して、指定した単語を目的のタグで囲むことができるようになりました。たとえば、強調の場合は「em」、太字の場合は「strong」などです。

これらの修正を組み込むことで、効率的に検索し、 jQuery コード内のテキスト文字列を変更して、動的コンテンツが適切なスタイルで表示されるようにします。

以上がjQuery を使用して動的に読み込まれるコンテンツ内の特定のテキスト文字列を効率的に太字にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。