如何可靠地找到 jQuery 元素中的特定文字並將其加粗？-css教學-PHP中文網

如何可靠地找到 jQuery 元素中的特定文字並將其加粗？

Barbara Streisand

發布： 2024-12-09 09:53:07

原創

540 人瀏覽過

How Can I Reliably Find and Bold Specific Text Within a jQuery Element?

使用 jQuery 修改文字元素：尋找和 Embolden

在 jQuery 中，動態操作 DOM 元素是很常見的。其中一項任務涉及在給定元素中查找特定文字並修改其外觀，例如將其加粗。

考慮以下程式碼：

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

登入後複製

在此範例中，我們嘗試在ID 為“about_theresidency”的元素中找到文字“跨流派”，並應用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中文網其他相關文章！