jQuery 要素内の特定のテキストを確実に見つけて太字にする方法は?

jQuery を使用したテキスト要素の変更: 検索とエンボルデン

jQuery では、DOM 要素を動的に操作するのが一般的です。このようなタスクの 1 つは、特定の要素内の特定のテキストを検索し、太字にするなどの外観を変更することです。

次のコードを考えてみましょう。

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

この例では、次のことを試みています。 ID「about_theresidency」の要素内でテキスト「cross ジャンル」を検索し、CSS を適用して太字にします。ただし、このアプローチでは望ましい結果が得られない場合があります。その理由を理解するために、別の解決策を検討してみましょう。

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

このアプローチでは、replace() メソッドを使用してテキスト「world」を識別し、太字の HTML タグで置き換えます。これは、次の理由により、特定のテキストを検索および変更するためのより信頼性の高い方法です。

• 直接のテキスト ノードだけでなく、要素の HTML コンテンツ全体を対象とします。
• 正規表現を使用します。 (/world/gi) を使用して、大文字と小文字を区別しない検索とグローバル置換を実行します。

これを処理する再利用可能なプラグインを作成することもできます。機能:

$.fn.wrapInTag = function(opts) {

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

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

使用法:

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

このプラグインを使用すると、任意の HTML タグを使用して、指定された要素内の特定の単語を簡単にラップできます。

以上がjQuery 要素内の特定のテキストを確実に見つけて太字にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。