資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 高亮顯示搜尋字串結果？
在 Web 應用程式中，在一個大型文字內容中搜索特定內容是很常見的任務。然而，僅僅顯示搜尋結果而沒有任何視覺指示，可能會使使用者難以識別和關注相關資訊。這就是需要高亮顯示搜尋字串的原因。透過動態高亮顯示文字中匹配的部分，我們可以改善使用者體驗，並使使用者更容易找到所需內容。
在這篇博文中，我們將探討使用 JavaScript 高亮顯示搜尋字串的不同方法。我們將介紹各種技術，從操作 HTML 內容到利用正則表示式和 CSS 樣式。無論您是為網站構建搜尋功能，還是正在處理基於文字的應用程式，這些方法都將使您能夠增強搜尋結果的可見性，並提供更直觀的使用者介面。
方法一 - 操作內部 HTML
一種直接高亮顯示搜尋字串的方法是操作包含文字的元素的內部 HTML。此方法包括查詢文字中搜索字串的出現位置，並用 HTML 標籤將其括起來或應用內聯樣式以視覺上突出顯示它們。
要實現此方法，請按照以下步驟操作：
檢索執行搜尋的目標元素的內容。
使用 replace() 方法或正則表示式查詢並替換用高亮顯示版本替換搜尋字串。
用 HTML 標籤包裝匹配的字串或應用內聯樣式來突出顯示它。
將修改後的內容設定回目標元素的內部 HTML。
讓我們用一個例子來說明這一點。假設我們有一個類名為“content”的 HTML 元素，並且我們想突出顯示其中搜索字串的出現位置。我們可以使用以下 JavaScript 程式碼：
// Get the target element
const contentElement = document.querySelector('.content');
// Retrieve the content
const content = contentElement.innerHTML;
// Replace the search string with the highlighted version
const highlightedContent = content.replace(/search-string/gi, '$&');
// Set the modified content back to the element
contentElement.innerHTML = highlightedContent;
在上面的程式碼中，我們使用帶正則表示式的 replace() 方法查詢並替換所有用高亮顯示版本替換搜尋字串的出現位置。替換字串中的$&代表匹配的字串本身。我們用一個元素將其包裝起來，並應用“highlight”類進行樣式設定。
示例
示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam cursus maximus eros, non consequat nulla vulputate id.
Sed porttitor quam a felis viverra lacinia.
Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
</div>
<form>
<input type="text" id="searchInput" placeholder="Search...">
<button type="button" onclick="highlightText()">Search</button>
</form>
<script>
function highlightText() {
const searchInput = document.getElementById('searchInput');
const searchValue = searchInput.value.trim();
const contentElement = document.querySelector('.content');
if (searchValue !== '') {
const content = contentElement.innerHTML;
const highlightedContent = content.replace(
new RegExp(searchValue, 'gi'),
'<span class="highlight">$&</span>'
);
contentElement.innerHTML = highlightedContent;
} else {
contentElement.innerHTML = contentElement.textContent;
}
}
</script>
</body>
</html>
在這個例子中，我們有一個包含一些示例文字的 content div 的 HTML 文件。我們還有一個輸入欄位供使用者輸入他們的搜尋字串和一個搜尋按鈕。當用戶點選搜尋按鈕時，會觸發 highlightText() 函式。
在 highlightText() 函式內部，我們從輸入欄位檢索搜尋字串，並修剪任何前導或尾隨空格。如果搜尋字串不為空，我們使用其內部 HTML 檢索 contentElement 的內容。然後，我們使用 replace() 方法和正則表示式將所有搜尋字串的出現位置（不區分大小寫）替換為高亮顯示的版本。匹配的字串 ($&) 包含在帶有“highlight”類的元素中。
如果搜尋字串為空，我們將透過將內部 HTML 設定為 contentElement 的文字內容來恢復原始內容。
方法二：使用 CSS 類進行高亮顯示
在此方法中，我們將使用 CSS 類來高亮顯示搜尋字串，而不是操作內部 HTML。以下是操作方法。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam cursus maximus eros, non consequat nulla vulputate id.
Sed porttitor quam a felis viverra lacinia.
Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
</div>
<form>
<input type="text" id="searchInput" placeholder="Search...">
<button type="button" onclick="highlightText()">Search</button>
</form>
<script>
function highlightText() {
const searchInput = document.getElementById('searchInput');
const searchValue = searchInput.value.trim();
const contentElement = document.querySelector('.content');
if (searchValue !== '') {
const content = contentElement.textContent;
const regex = new RegExp(searchValue, 'gi');
const highlightedContent = content.replace(
regex,
(match) => `<span class="highlight">${match}</span>`
);
contentElement.innerHTML = highlightedContent;
} else {
contentElement.innerHTML = contentElement.textContent;
}
}
</script>
</body>
</html>
在這個例子中，我們定義了一個名為“highlight”的 CSS 類，它應用於高亮顯示文字的所需樣式。在 highlightText() 函式內部，我們檢索搜尋字串，對其進行修剪，並使用其文字內容檢索 contentElement 的內容。然後，我們使用搜索字串和標誌 'gi'（全域性和不區分大小寫）建立一個正則表示式。
接下來，我們使用 content 字串上的 replace() 方法將所有搜尋字串的出現位置替換為高亮顯示的版本。我們不使用字串替換，而是使用一個回撥函式，該函式將匹配的字串包裝在一個帶有“highlight”類的<span>元素中。
最後，我們將 contentElement 的內部 HTML 設定為高亮顯示的內容。如果搜尋字串為空，我們將透過將內部 HTML 設定為文字內容來恢復原始內容。
方法三：使用正則表示式
在此方法中，我們將利用正則表示式的強大功能來動態高亮顯示搜尋字串。正則表示式提供了一種靈活而強大的方法來匹配字串中的模式。以下是我們可以使用正則表示式來高亮顯示搜尋字串的方法−
示例
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam cursus maximus eros, non consequat nulla vulputate id.
Sed porttitor quam a felis viverra lacinia.
Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
</div>
<form>
<input type="text" id="searchInput" placeholder="Search...">
<button type="button" onclick="highlightText()">Search</button>
</form>
<script>
function highlightText() {
const searchInput = document.getElementById('searchInput');
const searchValue = searchInput.value.trim();
const contentElement = document.getElementById('content');
if (searchValue !== '') {
const content = contentElement.innerHTML;
const regex = new RegExp(`(${searchValue})`, 'gi');
const highlightedContent = content.replace(
regex,
'<span class="highlight">$1</span>'
);
contentElement.innerHTML = highlightedContent;
} else {
contentElement.innerHTML = contentElement.textContent;
}
}
</script>
</body>
</html>
在這個例子中，我們使用 RegExp 建構函式定義一個正則表示式，傳遞搜尋值和標誌 'gi'（全域性和不區分大小寫）。我們將搜尋值放在括號中以將其捕獲為一個組。
在 highlightText() 函式內部，我們檢索搜尋字串，對其進行修剪，並使用其內部 HTML 檢索 contentElement 的內容。然後，我們使用 content 字串上的 replace() 方法，提供正則表示式和一個替換字串，該字串將匹配的搜尋值包裝在一個帶有“highlight”類的元素中。
方法比較
現在，讓我們比較我們已經介紹的方法：
方法一：操作內部 HTML
效能− 此方法對於小型到中型文字效率很高，但由於字串操作，對於大型文字可能會變慢。
易於實現− 使用 JavaScript 的內建字串函式相對容易實現。
靈活性− 它在自定義高亮顯示樣式和處理大小寫方面提供了靈活性。
瀏覽器相容性− 此方法在現代瀏覽器中得到廣泛支援。
方法二：使用 CSS 類進行高亮顯示
效能− 與其他方法相比，此方法可能較慢，尤其是在處理大型文字或頻繁搜尋操作時，因為 DOM 操作開銷較大。
易於實現− 它需要很好地理解 DOM 操作，並且可能涉及更復雜的程式碼。
靈活性− 它在自定義高亮顯示樣式和處理大小寫方面提供了靈活性。
瀏覽器相容性− 此方法受現代瀏覽器支援，但在不同實現之間可能存在細微的差異。
方法三：使用正則表示式
效能− 正則表示式對於搜尋和高亮顯示文字非常高效，即使是大量資料也是如此。
易於實現− 實現正則表示式需要紮實地理解其語法，這對於初學者來說可能更具挑戰性。
靈活性− 正則表示式提供了強大的模式匹配功能，允許進行高階搜尋和高亮顯示選項。
瀏覽器相容性− 正則表示式在現代瀏覽器中得到廣泛支援，但一些舊版本可能在正則表示式支援方面存在限制或差異。
結論
在本文中，我們探討了使用 JavaScript 高亮顯示搜尋字串的不同方法。每種方法都有其自身的優勢和注意事項，因此必須根據效能、易於實現、靈活性以及瀏覽器相容性等因素對其進行評估。
透過理解這些方法，您可以增強 Web 應用程式的搜尋功能，並提供更直觀的使用者體驗。
瀏覽量：3K+
