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

jQuery でのテキスト文字列の太字

段落内の特定のテキスト文字列を太字にして強調表示する jQuery ソリューションを探しています。ただし、コードは望ましい結果を生成しません:

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

このコードは、ID が「about_theresidency」の要素内にあるフレーズ「cross ジャンル」を含むテキストをターゲットにし、CSS プロパティ「font」を適用することを目的としています。 -weight」を太字にします。

解決策

jQuery を使用してテキスト文字列を太字にするには、html() とともに replace() メソッドを使用できます。次のコードは、その方法を示しています。

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

このコード スニペット:

1. 段落の HTML コンテンツを html 変数に保存します。
2. replace( ) HTML のメソッドを使用して、テキスト「world」 (大文字と小文字を区別しない) が出現するすべての箇所を検索し、それを 内にラップします。タグ。
3. 変更された文字列で段落の HTML コンテンツを更新し、太字の書式設定を適用します。

追加のヒント

コードプラグインに洗練することができます:

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

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

このプラグインを使用すると、特定の単語をラップすることができます。 HTMLタグ。示されている例では、単語「world」と「red」が でラップされています。タグ。

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