高亮搜索文字CSS是一種非常實用的技巧，可以讓用戶在網頁中快速找到他們感興趣的內容。本文介紹如何使用CSS來實現這種高亮搜索文字效果。

/**
 * 高亮搜索文字
 */
.highlight {
background-color: yellow;
}

首先，我們需要在CSS中創建一個樣式名為“highlight”的類，用于表示高亮搜索文字的樣式。在這個類中，我們設置背景顏色為黃色。

/**
 * 實現高亮搜索文字效果
 */
function highlightSearchText(searchText) {
// 獲取所有需要搜索的元素
var elements = document.querySelectorAll('.searchable');
// 遍歷所有元素
for (var i = 0; i< elements.length; i++) {
var element = elements[i];
// 獲取元素文本內容
var text = element.textContent || element.innerText;
// 在文本內容中搜索搜索文字
var searchRegex = new RegExp(searchText, 'gi');
var matches = text.match(searchRegex);
// 遍歷所有匹配
for (var j = 0; j< matches.length; j++) {
var match = matches[j];
// 創建高亮元素
var highlight = document.createElement('span');
highlight.className = 'highlight';
highlight.textContent = match;
// 替換搜索文字為高亮元素
text = text.replace(match, highlight.outerHTML);
}
// 更新元素文本內容
element.innerHTML = text;
}
}

接下來，我們需要編寫JavaScript函數來實現高亮搜索文字的效果。這個函數接收一個搜索文字作為參數，然后獲取所有需要搜索的元素，并在這些元素中搜索搜索文字。

在搜索文字中找到匹配后，我們創建一個新的元素用于表示高亮文字，并將其添加到匹配的搜索文字之前。最后，我們將搜索文字替換為高亮元素，然后更新元素的文本內容。

通過使用CSS和JavaScript，我們可以實現高效的高亮搜索文字效果，提高用戶在網頁中查找內容的效率。