ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery を使用して段落内の特定のテキストを検索し、太字にするにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-11-25 06:41:18
オリジナル
290 人が閲覧しました

How Can I Use jQuery to Find and Bold Specific Text Within a Paragraph?

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

動的コンテンツを扱う場合は、jQuery の機能を利用してテキストを強化し、より大胆な視覚効果を作成することが不可欠です。一般的なシナリオの 1 つは、段落内で特定のテキスト文字列を見つけて、それに太字の書式設定を適用することです。

ただし、次のコードでは問題が発生する可能性があります:

$(window).load(function() {
  $('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});
ログイン後にコピー

これを解決するには、 jQuery の html() メソッドを使用して堅牢なソリューションを実装することを検討してください。

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong$&</strong>'));
ログイン後にコピー

このコードは、出現するすべての「world」を強力なタグに置き換えます。

より適応性の高いアプローチとして、小さなプラグインを作成することもできます。

$.fn.wrapInTag = function(opts) {
  var tag = opts.tag || 'strong';
  var words = opts.words || [];
  var regex = RegExp(words.join('|'), 'gi'); // case insensitive
  var replacement = '<' + tag + '>$&</' + tag + '>';

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

// Usage
$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});
ログイン後にコピー

このプラグインは、指定された単語を含むテキストに太字の書式設定を割り当て、アプリケーションでテキストの強調をカスタマイズするための多用途ツール。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート