具體功能：同時(shí)查找多個(gè)關(guān)鍵詞，高亮加粗顯示，并關(guān)鍵詞顯示出現(xiàn)次數(shù)。
??碎碎念：最近在寫(xiě)文案的時(shí)候，總是要避免出現(xiàn)一個(gè)敏感詞匯，利用 (command+F) or (Ctr+F) 查找，只能一個(gè)一個(gè)單詞去查，很麻煩。???♂?
所以我寫(xiě)了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，在文本框輸入一整篇文章，在搜索框輸入我想要查找的關(guān)鍵詞，多個(gè)關(guān)鍵詞用逗號(hào) (,)?分隔開(kāi)，并且統(tǒng)計(jì)該關(guān)鍵詞出現(xiàn)次數(shù)。下面是效果圖：
?接下來(lái)我們具體實(shí)現(xiàn)一下。
（emm……本人對(duì)前端不是很了解，下面代碼僅限實(shí)現(xiàn)我自己的需求?????）
一、功能實(shí)現(xiàn)
1. html 網(wǎng)頁(yè)具體代碼：
<html>
<head>
<title>KeywordCrafter - 關(guān)鍵詞匠心</title>
<body>
<div class="mm">
<h1 style="text-align: center;">KeywordCrafter - 關(guān)鍵詞匠心</h1>
<textarea id="article" placeholder="請(qǐng)輸入文本內(nèi)容"></textarea><br>
<input type="text" id="words" style="width: 30%;height: 23px; font-size: 14px;" placeholder="輸入要搜索的單詞(以逗號(hào)分隔)">
<button onclick="searchWords()"><span class="search-icon"></span></button>
<div id="wordCounts"></div>
<div id="result"></div>
</div>
</body>
</html>2. JavaScript部分：
<script>
function searchWords() {
const articleContent = document.getElementById("article").value.toLowerCase();
const wordsToSearch = document.getElementById("words").value.toLowerCase().split(',');
let foundWords = {};
for (const word of wordsToSearch) {
const count = (articleContent.match(new RegExp(word.trim(), 'gi')) || []).length;
if (count > 0) {
foundWords[word.trim()] = count;
}
}
displayResult(foundWords);
}
// 顯示篩選后的文本
function displayResult(foundWords) {
const articleContent = document.getElementById("article").value;
const resultDiv = document.getElementById("result");
const wordCountsDiv = document.getElementById("wordCounts");
let highlightedContent = articleContent;
if (Object.keys(foundWords).length > 0) {
highlightedContent = highlightWords(articleContent, Object.keys(foundWords));
let wordCountsText = "關(guān)鍵詞 & 出現(xiàn)次數(shù): ";
for (const word in foundWords) {
wordCountsText += `${word} (${foundWords[word]} 次),`;
}
wordCountsDiv.innerText = wordCountsText;
} else {
wordCountsDiv.innerText = "沒(méi)有發(fā)現(xiàn)關(guān)鍵詞。";
}
resultDiv.innerHTML = highlightedContent;
}
// 篩選到的文本高亮加粗顯示
function highlightWords(content, words) {
for (const word of words) {
const regex = new RegExp(word, "gi");
content = content.replace(regex, `<span class="highlight">${word}</span>`);
}
return content;
}
</script>3. 網(wǎng)頁(yè)樣式：
<style>
body {
background-image: url("./images/bg1.jpeg");
background-size: cover;
/* 控制圖片如何適應(yīng)元素 */
background-repeat: no-repeat;
/* 防止圖片重復(fù)平鋪 */
}
input[type="text"],
textarea {
background-color: #f2f2f23e;
/* 自定義背景顏色 */
border: 1px solid rgba(204, 204, 204, 0.258);
/* 邊框樣式 */
padding: 10px;
/* 內(nèi)邊距 */
color: #333;
/* 文本顏色 */
}
button {
background-color: #007bff23;
/* 按鈕背景顏色 */
color: white;
/* 按鈕文本顏色 */
padding: 10px 20px;
/* 內(nèi)邊距 */
border: none;
/* 去除邊框 */
cursor: pointer;
/* 鼠標(biāo)懸停樣式 */
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.mm {
margin: 0 20px;
/* background-image:url("./images/bg1.jpeg") */
/* background-image:url("./images/bg2.jpeg") */
}
textarea {
font-size: 16px;
width: 100%;
height: 42vh;
align: center;
text-size-adjust: 14px;
padding: 5px;
}
#wordCounts {
margin: 5px;
color: blueviolet;
}
button .search-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('./images/ss.png');
/* 圖標(biāo)的 URL */
background-repeat: no-repeat;
background-size: 100%;
vertical-align: middle;
/* 垂直居中 */
margin-right: 5px;
/* 圖標(biāo)和文字之間的間距 */
}
</style>大家可以自己添加替換背景圖片。
二、代碼解析
（一）實(shí)現(xiàn)過(guò)程
主要通過(guò)JavaScript實(shí)現(xiàn)了同時(shí)查找多個(gè)關(guān)鍵詞的功能。讓我來(lái)解釋一下具體的實(shí)現(xiàn)過(guò)程：
-
頁(yè)面結(jié)構(gòu)：
- 使用
<div class="mm">創(chuàng)建一個(gè)具有特定樣式的區(qū)塊，其中包含了頁(yè)面元素。 -
<h1>標(biāo)簽顯示了頁(yè)面的標(biāo)題，且使用了text-align: center;來(lái)將標(biāo)題居中顯示。 -
<textarea>標(biāo)簽創(chuàng)建了一個(gè)文本輸入框，用戶可以在這里輸入要搜索的文章內(nèi)容。 -
<input>標(biāo)簽用于輸入要搜索的關(guān)鍵詞，設(shè)置了樣式以調(diào)整寬度、高度和字體大小。 -
<button>標(biāo)簽添加了一個(gè)按鈕，點(diǎn)擊按鈕會(huì)觸發(fā)searchWords()函數(shù)。 - 兩個(gè)
<div>標(biāo)簽用于顯示搜索結(jié)果和關(guān)鍵詞出現(xiàn)次數(shù)。
- 使用
-
JavaScript功能：
-
searchWords()函數(shù)會(huì)在用戶點(diǎn)擊搜索按鈕時(shí)觸發(fā)。它會(huì)獲取文本框中的文章內(nèi)容和要搜索的關(guān)鍵詞。 - 對(duì)于每個(gè)關(guān)鍵詞，使用正則表達(dá)式在文章內(nèi)容中查找匹配，并統(tǒng)計(jì)關(guān)鍵詞出現(xiàn)的次數(shù)。
- 所有搜索到的關(guān)鍵詞和出現(xiàn)次數(shù)會(huì)被保存在
foundWords對(duì)象中。
-
-
顯示結(jié)果：
-
displayResult()函數(shù)將搜索結(jié)果顯示在頁(yè)面上。如果有搜索到的關(guān)鍵詞，它會(huì)高亮顯示出現(xiàn)在文章內(nèi)容中的關(guān)鍵詞，并在旁邊顯示關(guān)鍵詞出現(xiàn)的次數(shù)。 - 如果沒(méi)有搜索到關(guān)鍵詞，將顯示一個(gè)相應(yīng)的提示信息。
-
-
高亮顯示：
-
highlightWords()函數(shù)用于將文章內(nèi)容中的關(guān)鍵詞進(jìn)行高亮顯示。它通過(guò)正則表達(dá)式匹配關(guān)鍵詞，并將匹配到的關(guān)鍵詞用<span class="highlight">標(biāo)簽包裹起來(lái)，從而實(shí)現(xiàn)高亮效果。
-
通過(guò)JavaScript實(shí)現(xiàn)了在文本內(nèi)容中同時(shí)查找多個(gè)關(guān)鍵詞，并將匹配到的關(guān)鍵詞高亮顯示以及統(tǒng)計(jì)關(guān)鍵詞出現(xiàn)次數(shù)的功能。同時(shí)，HTML和CSS也被用于創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)和樣式。
（二）正則表達(dá)式
當(dāng)調(diào)用searchWords()函數(shù)時(shí)，這段代碼利用了正則表達(dá)式和循環(huán)，逐個(gè)查找關(guān)鍵詞在文章中的出現(xiàn)次數(shù)，并將結(jié)果存儲(chǔ)在一個(gè)對(duì)象中，用于后續(xù)的顯示和統(tǒng)計(jì)。
-
獲取輸入內(nèi)容：
const articleContent = document.getElementById("article").value.toLowerCase();- 這行代碼獲取了輸入在id為"article"的文本框中的文章內(nèi)容，并將內(nèi)容轉(zhuǎn)換為小寫(xiě)字母，方便后續(xù)的比較。
-
獲取關(guān)鍵詞：
const wordsToSearch = document.getElementById("words").value.toLowerCase().split(',');- 這行代碼獲取了輸入在id為"words"的文本框中的關(guān)鍵詞，并將關(guān)鍵詞以逗號(hào)為分隔符拆分成一個(gè)數(shù)組。
- 之后，將每個(gè)關(guān)鍵詞轉(zhuǎn)換為小寫(xiě)字母，以便進(jìn)行不區(qū)分大小寫(xiě)的匹配。
-
創(chuàng)建一個(gè)空對(duì)象來(lái)存儲(chǔ)找到的關(guān)鍵詞和出現(xiàn)次數(shù)：
let foundWords = {}; -
遍歷每個(gè)關(guān)鍵詞并執(zhí)行查找：
for (const word of wordsToSearch) { const count = (articleContent.match(new RegExp(word.trim(), 'gi')) || []).length; if (count > 0) { foundWords[word.trim()] = count; } } -
- 在這個(gè)循環(huán)中，每個(gè)關(guān)鍵詞都經(jīng)過(guò)如下處理：
- 使用
new RegExp(word.trim(), 'gi')創(chuàng)建一個(gè)正則表達(dá)式對(duì)象，word.trim()用于去除關(guān)鍵詞前后的空格。 -
'gi'表示正則表達(dá)式會(huì)在全局范圍內(nèi)進(jìn)行匹配（g：global）且不區(qū)分大小寫(xiě)（i：case-insensitive）。 -
(articleContent.match(...) || []).length會(huì)匹配所有在articleContent中的關(guān)鍵詞，并返回匹配數(shù)組。 -
.length獲取匹配數(shù)組的長(zhǎng)度，即關(guān)鍵詞在文章中出現(xiàn)的次數(shù)。
- 使用
- 在這個(gè)循環(huán)中，每個(gè)關(guān)鍵詞都經(jīng)過(guò)如下處理：
-
如果關(guān)鍵詞出現(xiàn)次數(shù)大于0，則將關(guān)鍵詞及其出現(xiàn)次數(shù)存儲(chǔ)在
foundWords對(duì)象中。 -
最后，調(diào)用
displayResult(foundWords)函數(shù)來(lái)顯示搜索結(jié)果。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-643281.html
以上就是全部?jī)?nèi)容了，希望能幫到你。主頁(yè)有其他文章，可以看看哦~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-643281.html
到了這里，關(guān)于實(shí)現(xiàn)同時(shí)查找多個(gè)關(guān)鍵詞——KeywordCrafter - 關(guān)鍵詞匠心的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
