首頁 > web前端 > css教學 > 如何使用 jQuery 尋找段落中的特定文字並將其加粗?

如何使用 jQuery 尋找段落中的特定文字並將其加粗?

Mary-Kate Olsen
發布: 2024-11-25 06:41:18
原創
281 人瀏覽過

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

使用jQuery 尋找文字並加粗

處理動態內容時,必須利用jQuery 的功能來增強文字並創建更大膽的視覺效果。常見的情況是在段落中找到特定的文字字串並對其應用粗體格式。

但是,您可能會遇到以下程式碼的問題:

$(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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板