在大量文本中搜索特定內(nèi)容是 Web 應(yīng)用程序中的一項常見任務(wù)。然而，僅顯示搜索結(jié)果而沒有任何視覺指示可能會使用戶難以識別和關(guān)注相關(guān)信息。這就是需要突出顯示搜索字符串的地方。通過動態(tài)突出顯示文本的匹配部分，我們可以改善用戶體驗，讓用戶更容易找到所需的內(nèi)容。
在這篇博文中，我們將探索使用 JavaScript 突出顯示搜索字符串的不同方法。我們將介紹從操作 HTML 內(nèi)容到利用正則表達式和 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()方法或正則表達式查找搜索字符串并將其替換為突出顯示的版本。
用 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;
在上面的代碼中，我們使用帶有正則表達式的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() 方法和正則表達式將所有出現(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)建正則表達式。
接下來，我們對內(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)容。
方法三：使用正則表達式
在此方法中，我們將利用正則表達式的強大功能來動態(tài)突出顯示搜索到的字符串。正則表達式提供了一種靈活而強大的方法來匹配字符串中的模式。以下是我們?nèi)绾问褂谜齽t表達式突出顯示搜索到的字符串?
示例< /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ù)定義正則表達式，傳遞搜索值和標(biāo)志“gi”（全局且不區(qū)分大小寫）。我們將搜索值括在括號中以將其捕獲為一個組。
replaceText() 関數(shù)內(nèi)で、検索文字列を取得してトリミングし、內(nèi)部 HTML を使用して contentElement のコンテンツを取得します。次に、コンテンツ文字列に対して Replace() メソッドを使用し、一致する検索値を "highlight" クラスの 要素でラップする正規(guī)表現(xiàn)と置換文字列を提供します。
メソッドの比較
それでは、紹介した方法を比較してみましょう -
方法 1: 內(nèi)部 HTML を操作する
パフォーマンス? この方法は、小規(guī)模から中規(guī)模のテキストにはうまく機能しますが、大きなテキストの場合は文字列操作操作により遅くなる可能性があります。
実裝が簡単? JavaScript の組み込み文字列関數(shù)を使用して実裝が比較的簡単です。
柔軟性? ハイライト スタイルのカスタマイズと大文字小文字の區(qū)別の処理に柔軟性を提供します。
ブラウザの互換性?この方法は、最新のブラウザで広くサポートされています。
方法 2: CSS クラスを使用して強調(diào)表示する
パフォーマンス? このメソッドは、特に検索操作中に大きなテキストを処理する場合や頻繁に DOM 操作のオーバーヘッドが発生する場合、他のメソッドと比べて時間がかかる可能性があります。
実裝が簡単? DOM 操作を十分に理解する必要があり、より複雑なコードが必要になる場合があります。
柔軟性? ハイライト スタイルのカスタマイズと大文字小文字の區(qū)別の処理に柔軟性を提供します。
ブラウザの互換性?最新のブラウザはこのメソッドをサポートしていますが、実裝が異なると動作が若干異なる場合があります。
方法 3: 正規(guī)表現(xiàn)を使用する
パフォーマンス? 正規(guī)表現(xiàn)を使用すると、大量のデータであってもテキストを非常に効率的に検索して強調(diào)表示できます。
実裝が簡単? 正規(guī)表現(xiàn)を?qū)g裝するには、その構(gòu)文を深く理解する必要があり、初心者にとってはより難しいかもしれません。
#柔軟性?正規(guī)表現(xiàn)は強力なパターン マッチング機能を提供し、高度な検索と強調(diào)表示オプションを可能にします。
ブラウザの互換性? 最近のブラウザは正規(guī)表現(xiàn)を広くサポートしていますが、一部の古いバージョンでは正規(guī)表現(xiàn)のサポートや種類に制限がある場合があります。
＃＃＃結(jié)論は＃＃＃
この記事では、JavaScript を使用して検索文字列を強調(diào)表示するさまざまな方法を検討しました。各アプローチには獨自の利點と考慮事項があるため、パフォーマンス、実裝の容易さ、柔軟性、ブラウザーの互換性などの要素に基づいて評価することが重要です。
これらの方法を理解することで、Web アプリケーションの検索機能を強化し、より直感的なユーザー エクスペリエンスを提供できます。
以上がJavaScript を使用して検索文字列の結(jié)果を強調(diào)表示するにはどうすればよいですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。