如何使用 jQuery 有效地將動態載入內容中的特定文字字串加粗？

使用jQuery 尋找文字字串並將其加粗

在元素中尋找特定文字字串並修改其外觀是使用jQuery時的常見任務動態內容。在 jQuery 中，可以有效率地實現這一點。但是，如果您最初的方法沒有產生所需的結果，那麼讓我們進行故障排除並找到解決方案。

您提供的程式碼片段旨在將ID 為「的元素中包含字串「跨流派」的文字加粗。關於居住權。」雖然意圖很明確，但其實現中存在一個小錯誤：

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