在大量文本中搜索特定內(nèi)容是 Web 應(yīng)用程序中的一項常見任務(wù)。然而，僅顯示搜索結(jié)果而沒有任何視覺指示可能會使用戶難以識別和關(guān)注相關(guān)信息。這就是需要突出顯示搜索字符串的地方。通過動態(tài)突出顯示文本的匹配部分，我們可以改善用戶體驗，讓用戶更容易找到所需的內(nèi)容。
在這篇博文中，我們將探索使用 JavaScript 突出顯示搜索字符串的不同方法。我們將介紹從操作 HTML 內(nèi)容到利用正則表達(dá)式和 CSS 樣式的各種技術(shù)。無論您是為網(wǎng)站構(gòu)建搜索功能還是開發(fā)基于文本的應(yīng)用程序，這些方法都將使您能夠增強搜索結(jié)果的可見性并提供更直觀的用戶界面。
方法 1 - 操作內(nèi)部 HTML
突出顯示搜索字符串的一種直接方法是操作包含文本的元素的內(nèi)部 HTML。此方法涉及查找文本中出現(xiàn)的搜索字符串，并用 HTML 標(biāo)記將其包裹起來，或應(yīng)用內(nèi)聯(lián)樣式以直觀地突出顯示它們。
要實現(xiàn)此方法，請按照以下步驟操作 -
檢索執(zhí)行搜索的目標(biāo)元素的內(nèi)容。
使用replace()方法或正則表達(dá)式查找搜索字符串并將其替換為突出顯示的版本。
用 HTML 標(biāo)簽包裹匹配的字符串或應(yīng)用內(nèi)聯(lián)樣式來突出顯示它。
將修改后的內(nèi)容設(shè)置回目標(biāo)元素的內(nèi)部 HTML。
讓我們用一個例子來說明這一點。假設(shè)我們有一個類名為“content”的 HTML 元素，并且我們想要突出顯示其中出現(xiàn)的搜索字符串。我們可以使用以下 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;
在上面的代碼中，我們使用帶有正則表達(dá)式的replace()方法來查找所有出現(xiàn)的搜索字符串并將其替換為突出顯示的版本。替換字符串中的 $& 代表匹配的字符串本身。我們用 元素包裝它，并應(yīng)用“highlight”類來設(shè)置樣式。
示例
示例如下 -
<!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>
在此示例中，我們有一個 HTML 文檔，其內(nèi)容 div 包含一些示例文本。我們還有一個供用戶輸入搜索字符串的輸入字段和一個搜索按鈕。當(dāng)用戶點擊搜索按鈕時，就會觸發(fā)highlightText()函數(shù)。
在highlightText()函數(shù)中，我們從輸入字段中檢索搜索字符串并修剪任何前導(dǎo)或尾隨空格。如果搜索字符串不為空，我們將使用其內(nèi)部 HTML 檢索 contentElement 的內(nèi)容。然后，我們使用 Replace() 方法和正則表達(dá)式將所有出現(xiàn)的搜索字符串（不區(qū)分大小寫）替換為突出顯示的版本。匹配的字符串 ($&) 包裝在具有“highlight”類的 元素中。
如果搜索字符串為空，我們通過將內(nèi)部 HTML 設(shè)置為 contentElement 的文本內(nèi)容來恢復(fù)原始內(nèi)容。
方法二：使用CSS類進行高亮
在此方法中，我們將利用 CSS 類來突出顯示搜索到的字符串，而不是操作內(nèi)部 HTML。實現(xiàn)方法如下。
示例
<!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 類，它為突出顯示的文本應(yīng)用所需的樣式。在highlightText()函數(shù)中，我們檢索搜索字符串，修剪它，并使用其文本內(nèi)容檢索contentElement的內(nèi)容。然后，我們使用搜索字符串和標(biāo)志“gi”（全局且不區(qū)分大小寫）創(chuàng)建正則表達(dá)式。
接下來，我們對內(nèi)容字符串使用 Replace() 方法，將所有出現(xiàn)的搜索字符串替換為突出顯示的版本。我們不使用字符串替換，而是使用回調(diào)函數(shù)，將匹配的字符串包裝在具有“highlight”類的 元素中。
最后，我們將 contentElement 的內(nèi)部 HTML 設(shè)置為突出顯示的內(nèi)容。如果搜索字符串為空，我們通過將內(nèi)部 HTML 設(shè)置為文本內(nèi)容來恢復(fù)原始內(nèi)容。
方法三：使用正則表達(dá)式
在此方法中，我們將利用正則表達(dá)式的強大功能來動態(tài)突出顯示搜索到的字符串。正則表達(dá)式提供了一種靈活而強大的方法來匹配字符串中的模式。以下是我們?nèi)绾问褂谜齽t表達(dá)式突出顯示搜索到的字符串?
示例< /h3>
<!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 構(gòu)造函數(shù)定義正則表達(dá)式，傳遞搜索值和標(biāo)志“gi”（全局且不區(qū)分大小寫）。我們將搜索值括在括號中以將其捕獲為一個組。
highlightText() ?? ??? ?? ???? ???? ??? ?? ?? HTML? ???? contentElement? ???? ?????. ?? ?? ??? ???? ?? ???() ???? ???? "highlight" ???? ?? ???? ???? ?? ?? ???? ?? ???? ???? ?????.
?? ??
?? ????? ???? ??? ??? -
?? 1: ?? HTML ??
Performance? ? ??? ?? ??? ???? ?? ?????? ??? ?? ???? ?? ? ???? ?? ??? ??? ? ????.
???? ??? JavaScript? ??? ??? ??? ???? ??? ?? ??? ? ????.
Flexibility? ????? ???? ??? ???? ???? ??? ???? ???? ?????.
???? ????? ??? ?? ?????? ?? ?????.
?? 2: ?? ??? CSS ??? ??
??? ? ??? ?? DOM ?? ????? ?? ? ???? ??? ?? ??? ??? ? ?? ??? ?? ??? ?? ? ????.
???? ??? DOM ??? ?? ??? ??? ???? ? ??? ??? ??? ? ????.
Flexibility? ????? ???? ??? ???? ???? ??? ???? ???? ?????.
???? ?????? ????? ? ??? ????? ??? ?? ?? ??? ??? ? ????.
?? 3: ??? ??
Performance? ?? ???? ?? ?? ?????? ?? ????? ???? ???? ?? ??? ? ????.
???? ??? ???? ????? ??? ?? ?? ??? ???? ?? ????? ? ??? ? ????.
Flexibility????? ??? ?? ?? ??? ???? ?? ?? ? ?? ??? ?????.
???? ???? ?? ????? ???? ????? ????? ?? ?? ????? ??? ??? ????? ??? ? ????.
??
? ????? JavaScript? ???? ?? ???? ?? ???? ??? ??? ?????. ? ?? ???? ??? ??? ?? ??? ???? ??, ?? ???, ??? ? ???? ???? ?? ??? ???? ???? ?? ?????.
??? ??? ???? ? ??????? ?? ??? ???? ?? ???? ??? ??? ??? ? ????.
? ??? JavaScript? ???? ??? ??? ??? ?? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!