jQuery实现页面关键词高亮
生活随笔
收集整理的這篇文章主要介紹了
jQuery实现页面关键词高亮
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
示例代碼，關(guān)鍵位置做了注釋，請(qǐng)查看代碼：
<html><head><title>jQuery實(shí)現(xiàn)頁面關(guān)鍵詞高亮</title><style type="text/css">* {margin: 0;padding: 0;}p {padding: 10px;margin-bottom: 20px;}.highlight {background-color: yellow;font-weight: bold;}</style></head><body><form><p>I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.</p><p>I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.</p><p>I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.</p><input type="text" id="text" /><input type="button" id="search" value="Search" /><input type="button" id="clear" value="Clear" /></form><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {//點(diǎn)擊search按鈕時(shí)，執(zhí)行highlight函數(shù) $('#search').click(highlight);//點(diǎn)擊clear按鈕時(shí)，執(zhí)行clearSelection函數(shù) $('#clear').click(clearSelection);function highlight() {//先清空一下上次高亮顯示的內(nèi)容 clearSelection();//獲取輸入的關(guān)鍵詞var searchText = $('#text').val();//創(chuàng)建正則表達(dá)式，g表示全局的，如果不用g，則查找到第一個(gè)就不會(huì)繼續(xù)向下查找了var regExp = new RegExp(searchText, 'g');//遍歷段落 $('p').each(function() {var html = $(this).html();//將找到的關(guān)鍵詞替換，加上highlight屬性var newHtml = html.replace(regExp, '<span class="highlight">' searchText '</span>');//更新段落內(nèi)容 $(this).html(newHtml);});}function clearSelection() {$('p').each(function() {//找到所有highlight屬性的元素 $(this).find('.highlight').each(function() {//將highlight樣式去掉 $(this).replaceWith($(this).html());});});}});</script></body></html>執(zhí)行運(yùn)行代碼，效果為：
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的jQuery实现页面关键词高亮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack css打包为一个css
- 下一篇： 移动端网页宽度值（未加meta view