用于在HTML中的<p>元素中搜索關(guān)鍵字酪穿，并將匹配的關(guān)鍵字用<mark>標(biāo)簽包圍掐暮，以便突出顯示卵慰。
使用Jquery來實(shí)現(xiàn)
<p class="msg">是我</p>
<p class="msg">我來啦</p>
<p class="msg">我在這里</p>
<p class="msg">你在干嘛</p>
<script>
const searchTerm = '我';
$('.msg').each(function() {
if ($(this).text().includes(searchTerm)){
$(this).html($(this).text().replace(new RegExp(`${searchTerm}`, 'g'), function (match) {
return '<mark>' + match + '</mark>';
}))
}
});
</script>
首先使用$('.msg')來選擇所有具有class="msg"的<p>元素抬吟。然后渐行，使用each()函數(shù)來遍歷這些元素弛针，并在每個(gè)元素上執(zhí)行一個(gè)回調(diào)函數(shù)叠骑。
在回調(diào)函數(shù)中，使用$(this).text()來獲取當(dāng)前元素的文本內(nèi)容削茁，并使用includes()函數(shù)來檢查該文本是否包含搜索字符串宙枷。如果包含掉房，則使用$(this).html()來更新當(dāng)前元素的HTML內(nèi)容，以便在匹配的文本中使用<mark>標(biāo)簽包圍搜索字符串慰丛。
使用原生JavaScript來實(shí)現(xiàn)
<p class="msg">是我</p>
<p class="msg">我來啦</p>
<p class="msg">我在這里</p>
<p class="msg">你在干嘛</p>
<script>
const searchTerm = '我';
const terms = document.querySelectorAll('.msg');
terms.forEach(term => {
if (term.textContent.includes(searchTerm)) {
term.innerHTML=term.firstChild.nodeValue.replace(new RegExp(`${searchTerm}`, 'g'), function (match) {
return '<mark>' + match + '</mark>';
})
}
});
</script>
原理跟jq一樣
