在前端開(kāi)發(fā)中,經(jīng)常需要使用到文本高亮顯示的功能,尤其是在搜索關(guān)鍵字的時(shí)候。而jQuery就提供了很方便的方法來(lái)實(shí)現(xiàn)這一功能。
首先,我們需要在頁(yè)面中加載jQuery庫(kù):
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
接下來(lái),我們可以通過(guò)jQuery的`highlight()`方法來(lái)實(shí)現(xiàn)文本高亮。該方法接收一個(gè)參數(shù),為需要高亮的關(guān)鍵字。比如我們需要將文本中的“hello”關(guān)鍵字高亮顯示,則可以這樣寫(xiě):<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hello, world. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
$('#content').highlight('hello');
</script>
這時(shí)候,頁(yè)面中所有包含“hello”關(guān)鍵字的文本都會(huì)被高亮顯示出來(lái)。
當(dāng)然,我們也可以通過(guò)傳入一個(gè)CSS類(lèi)名來(lái)指定高亮樣式,例如:.highlight {
background-color: yellow;
}
<script>
$('#content').highlight('hello', 'highlight');
</script>
這里我們將背景色設(shè)置為黃色,然后將高亮樣式設(shè)置為`.highlight`,并通過(guò)jQuery的`highlight()`方法來(lái)設(shè)置需要高亮的關(guān)鍵字和高亮樣式。最終頁(yè)面中,所有包含“hello”關(guān)鍵字的文本會(huì)被標(biāo)記為黃色背景。
總之,jQuery提供的文本高亮顯示功能十分方便實(shí)用,能夠讓我們?cè)谇岸碎_(kāi)發(fā)中更加高效地處理文本內(nèi)容。