如何使用 jQuery 突出顯示文字中的特定單字？

使用 jQuery 突出顯示單字

問題：

突出顯示文字區塊中的特定單字。例如，突出顯示以下文字中的「dolor」：

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

預期結果：

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

jQuery 解決方案：

jQuery 解決方案：

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

是的，使用jQuery 是可以達到這種效果的。以下程式碼片段提供了解決方案：

說明：
2. $.fn.highlight 是一個自訂jQuery 函數，它將單字作為參數。
3. pattern 變數透過轉義中的特殊字元來建立正規表示式模式word.
4. each 函數迭代所有符合的元素（在本例中為段落標籤），並用包圍它的 標籤替換出現的單字。

最後， $("p").highlight("dolor") 行調用自訂函數，傳遞「dolor」作為單字

注意：

還有許多其他基於jQuery 的解決方案和外部插件可用，可滿足特定需求並提供附加功能。探索這些選項以找到最適合您要求的選項。

以上是如何使用 jQuery 突出顯示文字中的特定單字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！