jQuery中如何實作文字高亮顯示？

jQuery是一個流行的JavaScript函式庫，用來簡化HTML文件的操作和事件處理。在實現文字高亮顯示的功能時，可以透過以下步驟來使用jQuery來實現：

1. 引入jQuery庫文件：
   首先，需要在HTML文件中引入jQuery庫文件，可以透過CDN連結或本地文件加入到頁面中。在標籤內加入以下程式碼片段：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. 編寫HTML結構：
   在頁面中新增一個文字方塊或其他HTML元素，用於輸入需要高亮顯示的文字內容。程式碼範例如下：

<input type="text" id="searchInput" placeholder="输入需要高亮显示的文本">
<button id="highlightBtn">高亮显示</button>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula metus ac odio.
</div>

3. 編寫jQuery程式碼：
   接下來，透過jQuery編寫程式碼實作文字高亮顯示的功能。程式碼範例如下：

$(document).ready(function() {
    $("#highlightBtn").click(function() {
        var searchString = $("#searchInput").val();
        var content = $("#content").text();
        
        var highlightedContent = content.replace(new RegExp(searchString, 'gi'), function(match) {
            return '<span class="highlighted">' + match + '</span>';
        });
        
        $("#content").html(highlightedContent);
    });
});

在上述程式碼中，首先取得輸入框中的搜尋文字和內容區域的文字。然後使用JavaScript的replace方法結合正規表示式，在匹配到的文字上加上標籤來實現高亮顯示。最後將處理過的內容重新設定到內容區域。

4. CSS樣式設定：
   為了讓高亮顯示效果更好，還要在CSS檔案中設定高亮文字的樣式。程式碼範例如下：

.highlighted {
    background-color: yellow;
    font-weight: bold;
}

透過上述步驟，就可以在頁面上實作文字高亮顯示的功能。使用者輸入需要高亮顯示的文字後，點擊按鈕即可將符合的文字內容高亮顯示出來。 jQuery的強大和便利性使得實現文字高亮功能變得簡單而有效率。

以上是jQuery中如何實作文字高亮顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！