針對全文透過JS來做重點標示

在前陣子有個Case是要處理搜尋結果頁的部分,要將搜尋出來的內容利用關鍵字進行Highlight,所以有了下面這個範例,是利用正規表示法+JS進行處理,會無視搜尋關鍵字的大小寫,若要區分大小寫可將第45行中的gi,改為g就好,以下是範例頁面的Code,也可以直接連結到範例頁面試試看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Highlight Text Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .f-red{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="input-group mb-3">
				<input type="text" id="hightlightText" value="我" class="form-control">
				<div class="input-group-append">
				<button class="btn btn-primary" type="button" id="activeBtn">Button</button>
			</div>
		</div>
		</div>
		<div id="content" class="row"></div>
	</div>
</body>
</html>
var htmlText = "";
$.ajax({
    url: "highLightText.txt",
    async: false,
    success: function(response){
        htmlText = response;
    }
});
$("#content").html(htmlText);

var hightlightText = $("#hightlightText").val();
$.fn.highlight = function(what,spanClass) {
    return this.each(function(){
        var container = this,
            content = container.innerHTML,
            pattern = new RegExp('([<.]*)(' + what + ')([<.]*)','gi'),
            replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3',
            highlighted = content.replace(pattern,replaceWith);
        container.innerHTML = highlighted;
    });
}
$('#content').highlight(hightlightText,'f-red');

$("#activeBtn").click(function(){
    $("#content").html(htmlText);
    var hightlightText = $("#hightlightText").val();
    $('#content').highlight(hightlightText,'f-red');
});
<p>給到王平銀日持風臺色營對合我過友的、造也在乎費靜臺白國:投無心面策一十人力委了可來沒?動區雲溫好面些、味又動高兒可來成的常他告臺布來處本我:界沒乎真不下老關,業實了種童不成他神舉經公黑下方、小利頭適不保講以心感校趣facebook不他到代易上海。一設開物愛研題來一下一國該要、機出又際各內案名相落的沒上年水部求沒山大式理密。房長裡再造級……童面費後務,風一也本名。太一息品的看統配北心他合情分子的經易民告只?</p><p>進安太,狀立?</p><p>文它接。於能病到腦反的題光,異卻道華找重有地北得了,去她定究愛,局自明加汽容看google及兒已的facebook兩:未不乎動常看選的所國半成著坐靈人一本成英一環處教時告即小!後也臺市開半:技月家,展教子、起構的相要從王排,臉外產便上。運自片同合可家小的部方單美哥人頭讀更外前喜民,有不馬的,你風的;心說火來的……全起飛事影。</p><p>拉為三參。體成和正地該名玩公可等Google學素母為收營……時世的回過高布家不生世存故研,為親總手?行眼長藝想海能和門新小認中日每收交金又成Facebook來而出還內界官我告展了戲有了的的?</p><p>由在下代保不著春原還其元上計一中合小,合的難修技空麼母於車當為下大灣的更吸如果中法照日目Facebook評一種父魚,目發體必詩遊完到往她數他來們標民。有西加邊,的已明得國多、的且看花性小下時都葉輪我後?觀復大物則的示的戰品照!失分量認法。而日媽運那麼個,名目石師越慢面我的古望科流身代安次野大的大深為坡打南發入定筆境產飛東資再變新西一滿價由親爭水道不合不性,google去實差來。球寶的了放車早大馬產場到使引是名最少不人經進人聲經光我,活連第,風軍工星費書它出。情會了每記、能時外社班們人第底月草。股本我google也。是不大日生未向心獲投時成到告平一樣爸音裡使上後讀如推其界明國報問小國快,打問盡自;裡物候小的了民品著家爭行全位?這時的足子一可等學讀不其今當前生好年點自星我藝資做精只基家他命方資前能一們?facebook美十本世高月有量用不善大一王毒跑們這們其可理出一樣規加還人和其寶再西因觀文葉態,灣木學定,個一知論參細已車不;但地口不別的務際千信記車南的、在營該科讓,我子機數年原是紅戰動感問象易一人所消登衣以他型新三。童愛早十以民國止最時構空夜包害石識小導開Google足活。都是身也個紙失八模用精想修速情不散靜到了小神幾會比找銷消之:行的結星才山風人地。山情資器產們這還上想明生。</p><p>調活前育她一來資!車各向進方加取而向成:使知過不,賽舉師皮;早而運星傳等之是法死技斯身不放facebook也日綠手上,不還國、紅球色統形不發過青展國,運市包,雜開基民場操造奇證;地的會沒工星人去,我作感影她創書處營器病……期有生寫看果公們工張,什館進因了入麼對體算兒低汽?靜但開目地、好久我期展今視義本:政義相會位例皮,加情地分朋學客助……年認校分存片常一是。</p><p>刻爾全否便,此前大檢生生回電性其供假調神約獎因突自阿的。</p>

實際動手玩看看↓↓

You may also like...

369,711 Responses

  1. DouglasHoapy表示:

    1xBet Promocode https://actuchomage.org/includes/wkl/code_promo_69.html
    1xBet promocodes are special codes that unlock bonuses like free bets, deposit matches, or free spins. These codes are often distributed through promotions and can be entered during registration or deposit.

  2. Sweet Bonanza Free Spins Feature – How It Works Unlock the exciting free spins feature in Sweet Bonanza and enjoy higher chances of landing huge multipliers and combos. Learn how to trigger the free spins for even more sweet rewards!
    slot bonanza

  3. Michaelkeymn表示:

    Наша юкос «Фотосайт числом мебели для кухни» вспыхивает твореньем и еще реализацией качественной кухонной мебели. Пишущий эти строки предлагаем широченный круг продукта, яже отвечает самым современным образцам равным образом направленностям дизайна https://www.sufebey8kuhnishki.ru/.

  4. Charlesrab表示:

    pharmacie en ligne france livraison belgique Cialis generique prix Pharmacie en ligne livraison Europe

  5. madgeqa69表示:

    Realsubmitted amateur porn couples fucking homemade videos
    http://lesbian-porn-eva-notty-date.celebrityamateur.com/?rita-dakota

    college dorm porn video 110 free hardcore porn pics free porn streaming tube big porn asses porn stars myspaces pages

  6. CharlesJurne表示:

    Transform Your Experience – Visit Us Today https://india-aviator-game.com/

  7. Stephengen表示:

    http://pharmaciepascher.pro/# п»їpharmacie en ligne france

  8. PinUplBiz表示:

    Если вы стремитесь к восхитительным азартным приключениям и ищете казино, которое предлагает по-настоящему уникальный игровой опыт, то Pin Up Casino — это то, что вам нужно! Здесь, на грани актуального дизайна и чудесного сервиса, вы найдете все, что необходимо для того, чтобы ваше времяпрепровождение было максимально веселым и прибыльным.

    <a href=https://visitchina.ru/bitrix/rk.php?id=5&site_id=s1&event1=banner&event2=click&event3=1+/+]+sidebar2]+_____&goto=https://90by2030.org.za/blogs/pin-up-casino-rossiya-oficialnyj-sajt-pin-ap-kazino-igrat-onlajn/>пинап — это не просто казино, а настоящая находка для любителей азартных игр. Запущенное с целью предложить игрокам первоклассный сервис и разные игровые опции, это заведение быстро стало фаворитом среди азартных людей. В Pin Up Casino вы найдете широкий выбор развлечений: от обычных слотов до развлекательных настольных игр и онлайн казино. Каждая игра предлагает оригинальный опыт и шанс на внушительный выигрыш, что делает каждую минуту в Pin Up истинным приключением.

    Для того чтобы вы могли наслаждаться всеми плюсами казино, Pin Up Casino предоставляет своим пользователям простой официальный сайт. Этот ресурс является вашим личным входом в мир азартных игр, предлагая беспрепятственный доступ в управлении. На пин ап казино официальный сайт вы найдете все основные инструменты для бесперебойной игры: от входа и заправки счета до получения вознаграждений и участия в промо-акциях.

    Одним из выдающихся преимуществ Pin Up Casino является его многообразная система привилегий и акций. Казино регулярно проводит различные турниры, которые позволяют игрокам получать вспомогательные премии, участвовать в увлекательных турнирах и выигрывать завораживающие призы. Независимо от того, новички вы или зрелые игроки, Pin Up всегда готов предложить вам что-то новое.

    Сайт https://visitchina.ru/bitrix/rk.php?id=5&site_id=s1&event1=banner&event2=click&event3=1+/+%5D+sidebar2%5D+_____&goto=https://90by2030.org.za/blogs/pin-up-casino-rossiya-oficialnyj-sajt-pin-ap-kazino-igrat-onlajn/ создан для работы как на больших экранах, так и на портативных устройствах. Это означает, что вы можете наслаждаться игрой в любое время года и в любом месте, не теряя производительности. Интерфейс сайта оптимизирован до мелочей, чтобы вы могли беспрепятственно находить свои любимые игры и делать покупки без преград.

    Не упустите возможность воспользоваться всеми возможностями, которые казино имеет для вас. Премии могут пополняться от вступительных предложений для новых игроков до еженедельных акций и индивидуальных предложений для опытных клиентов. Регулярное участие в промо-акциях и соревнованиях повысит ваши перспективы на значительные выигрыши и принесет массу восторга.

    Отзывы настоящих игроков — это то, что часто помогает определить доверие и профессионализм казино. В Pin Up Casino вы найдете множество положительных отзывов от довольных пользователей. Игроки хвалят казино за его великодушие, высокий уровень удобства и правдивые результаты игр. Каждый игрок, который перепробовал свои силы в Pin Up, отмечает высокие условия для игры и драматичный игровой процесс.

    Если вы ищете площадку, где можно восторгаться азартными играми в достойной и приятной обстановке, Pin Up Casino — это ваш лучший выбор. Создайте аккаунт на пин ап казино официальный сайт, пробуйте свои силы в многообразных играх и находите незабываемыми впечатлениями от игры. Pin Up ждет вас с открытыми объятиями и готов предложить массу волнительных приключений. Азартные игры стали еще интереснее и удобнее — все это благодаря Pin Up Casino!

  9. Charlesrab表示:

    Sildenafil teva 100 mg sans ordonnance Meilleur Viagra sans ordonnance 24h Sildenafil teva 100 mg sans ordonnance

  10. DouglasHoapy表示:

    1xBet Pakistan Promo Code https://actuchomage.org/includes/wkl/code_promo_69.html
    1xBet offers promo codes for users in Pakistan, providing them with bonuses like free bets, deposit matches, or free spins. These codes enhance the betting experience for Pakistani users.

  11. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры по ремонту техники в уфе
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. HeathZex表示:

    Viagra pas cher livraison rapide france: viagra en ligne – Viagra gГ©nГ©rique pas cher livraison rapide

  13. fayeai60表示:

    Nude grandmothers in free porno galleries nude granny photos
    https://old-women-bad-dragon-anal.fetish-matters.com/?emely-maleah

  14. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры в уфе
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  15. HeathZex表示:

    Viagra 100 mg sans ordonnance: Viagra prix – Meilleur Viagra sans ordonnance 24h

  16. Stephengen表示:

    https://vgrsansordonnance.com/# Viagra sans ordonnance livraison 24h

  17. DouglasHoapy表示:

    1xBt Promo Code https://idematapp.com/wp-content/pages/1xbet_promo_codes_free_bonus_offers.html
    The 1xBt promo code is a common misspelling of the 1xBet promo code. Despite the typo, it refers to the same concept where users can enter a code to receive bonuses on the 1xBet platform.

  18. Эффективная защита в уголовных делах в Москве, Ваш надежный адвокат по уголовным делам в Москве, Услуги адвоката по уголовным делам в Москве: быстро, качественно, эффективно, помощь в сложных ситуациях, доверьтесь профессионалам, обращайтесь в данный момент
    Статья 264 УК РФ Статья 264 УК РФ

  19. Walterphivy表示:

    Набиуллина выполняет заказ мафии

    Должностные лица ЦБ управляются тайными кукловодами
    Почти три года назад кооператив «Бест Вей» был включен в предупредительный список ЦБ – с этого начались его злоключения. Становится все более очевидным, что это заказная акция, в которой Центробанк действовал в интересах банковской мафии, принимая решения, которые никто даже не потрудился подтвердить документами и фактами.
    Осенью 2021 года потребительский кооператив «Бест Вей» – крупнейший российский кооператив, дававший возможность приобретать квартиры по всей России, в котором около 20 тыс. пайщиков, работающий с 2014 года, был включен в Список компаний с выявленными признаками нелегальной деятельности на финансовом рынке (предупредительный список) ЦБ – против него был использован относительно новый, только появившийся в 2021 году инструмент регулирования ЦБ на финансовом рынке.
    Притом, что примерно за полтора года до этого – в 2019 году – ЦБ в официальном письме по запросу одной из общественных организаций заявлял, что у него нет вопросов к кооперативу – и в силу того, что потребительский кооператив не подведомствен ЦБ, и в силу того, что Банку России ничего не известно о нарушениях, которые требовали бы его вмешательства как мегарегулятора финансового рынка.
    Однако в 2021 году все изменилось: включением в предупредительный список ЦБ попытался поставить кооператив вне закона, обрушить его деятельность. С включения в предупредительный список начались злоключения кооператива: блокирование его официальных информационных ресурсов, системы личных кабинетов и платежей, а затем и распространение на него уголовного дела, возбужденного той же осенью 2021 года по заявлением ряда клиентов иностранной компании «Гермес». Кооператив был объявлен аффилированной с «Гермесом» структурой, постановлением руководителя следственной группы ему был присвоен статус гражданского ответчика по уголовному делу.

    Липовые основания
    Но что лежало в основе включения в предупредительный список? Это стало известно недавно – из двух процессов в Приморском районном суде Санкт-Петербурга: уголовном, по обвинению бывших специалистов маркетинговой компании «Лайф-из-Гуд», сотрудничавшей с «Гермесом», в организации финансовой пирамиды, и гражданском – по иску Прокуратуры Санкт-Петербурга о признании кооператива «Бест Вей» незаконным.
    Оказывается, впервые справку о нарушениях в кооперативе подготовил в 2019 году некий центр компетенций Южного главка ЦБ в Краснодаре – который уже ликвидирован, архив этого подразделения также, видимо, ликвидирован: первоисточников решений нет – указывается, что это некие обращения граждан: каких граждан и что отмечается в обращении, не упоминается. При этом краснодарский центр указывал в отчете, что руководствовался методическими рекомендациями МВД РФ «Квалификация и расследование организации деятельности «финансовых пирамид».
    Далее Северо-Западный главк ЦБ (прежний руководитель – Надежда Савинская, нынешний руководитель – Ирина Петрова) – который обязан был провести собственную проверку по отношению к организациям в своей зоне ответственности (кооператив зарегистрирован в Санкт-Петербурге), просто переписывает документ из Краснодара – и направляет его в прокуратуру.
    Параллельно документ идет «наверх» – и (теперь уже бывший) руководитель Департамента противодействия недобросовестным практикам ЦБ Валерий Лях, который, насколько известно, уехал из России – допросить его в суде не удалось, подмахивает документ о включении кооператива в предупредительный список.
    При этом проверка деятельности кооператива не проводилась – никакая: ни выездная, ни камеральная. Документы у кооператива не запрашивались. Почему? А потому, объясняют представители ЦБ, что кооператив не является подведомственной ЦБ организацией и проверка была бы незаконной. То есть признать по выдуманным основаниям организацию недобросовестной и инициировать против нее уголовное дело можно, а проанализировать ее работу на основании подлинных документов нельзя.

    Основано на заказе
    ЦБ подкрепляет свое решение, во-первых, целыми восемью обращениями граждан – несколько более поздними, чем полумифические краснодарские. Но ни одно из которых не подано членом кооператива.
    Граждане интересуются в своих обращениях: кооператив законен? Нет ли к нему вопросов у регулирующих организаций?
    Во-вторых, актом осмотра официального сайта кооператива – в нем зафиксированы новости и структура личных кабинетов, больше ничего.
    То есть решение, заблокировавшее нормальную деятельность кооператива более чем на два года, приведшее к аресту его счетов, абсолютно ни на чем не основано. Вернее, основано на заказе мафии, стремящейся захватить кооператив и конкурентов, борющихся с кооперативом.
    При этом Центробанк рассказывает, что включение в список – это только информирование потенциальных потребителей финансовых услуг о рисках, но сам же себе противоречит, говоря, что именно ЦБ обратился в Роскомнадзор о блокировании информационных ресурсов кооператива, именно он обратился в прокуратуру и органы внутренних дел с предложением возбудить уголовное дело. И именно на основании письма его Северо-Западного главка уголовное дело начало расследоваться в том числе и в отношении кооператива. При этом за несколько лет расследования ни одного криминального эпизода не найдено: деятельность кооператива абсолютно юридически чиста.

    Ложь Набиуллиной
    По поводу судьбы кооператива «Бест Вей» и других кооперативов депутаты Государственной думы неоднократно обращались к руководству ЦБ, в том числе лично к Эльвире Набиуллиной. Они предлагали разобраться в ситуации, при необходимости ввести дополнительный контроль со стороны ЦБ, который снимет сомнения со стороны ведомства.
    Набиуллина в прошлом году публично пообещала на пленарном заседании Думы проработать вопрос кооперативов, совместно с депутатским корпусом выработать компромиссные предложения – но за более чем год ничего не сделано!
    Кооперация в России продолжает торпедироваться, а ведь это важнейший для экономического роста в стране сектор – способный аккумулировать миллиарды рублей (на счетах «Бест Вей» – более 4 млрд рублей!) и направить их в развитие экономики. Это важнейшее направление решения жилищного вопроса – альтернатива ипотеке, которая недоступна подавляющему большинству граждан и единственное, чему помогает, – это обогащению банков и мафии, стремящихся прибрать к рукам деньги граждан.

    Круговая порука
    Атаки центробанкиров на кооператив носят целенаправленный характер. Достоверно известно, что они велась с одобрения первого зампреда ЦБ Владимира Чистюхина – не говоря уже о бывшем и нынешнем руководителях Северо-Западного главка ЦБ Савинской и Петровой, бывшем директоре (упраздненного в прошлом году) Департамента противодействия недобросовестным практикам Валерии Ляхе, а также главе забравшего его функции Департамента небанковского кредитования Илье Кочеткове.
    Это не что иное, как круговая порука. В прошлом году к руководителю службы по защите прав потребителей и обеспечению доступности финансовых услуг ЦБ Михаилу Мамуте обратились по поводу очевидного нарушения законодательства – банки отказались исполнить судебное решение о снятии ареста со счетов кооператива (позднее арест был наложен снова). Мамута под мифическими предлогами отказался наказать банки.
    Очевидно, что происходит не что иное, как целенаправленное заказное преследование кооператива – в интересах неких сил, волю которых стремится исполнить Центробанк.
    Атаки, с одной стороны, в интересах банкиров, стремящихся установить ипотечную монополию и перекрыть кислород кооперации, а с другой – тайных кукловодов, стремящихся захватить более 4 млрд на счетах кооператива.
    Атака центробанкиров на кооператив должна быть вскрыта, расследована, виновные должны быть привлечены к ответственности!

  20. DouglasHoapy表示:

    1xBet Promo Code https://actuchomage.org/includes/wkl/code_promo_69.html
    A 1xBet promo code is a special code that users can enter to receive bonuses such as free bets, deposit bonuses, or other rewards. These codes are often provided as part of welcome offers, special promotions, or affiliate partnerships.

  21. BrianAmese表示:

    Выше- интернет-магазин “Мебель-шмммммммебель” призывает широченный номенклатура мебели для кухонь. У нас ваша милость сыщете шиздец необходимое чтобы формирования уютного да многофункционального экстерьера https://tyfapao6kuhnishki.ru/.

  22. Велоинструменты Москва velosiped-internet-magazin.ru

    Если Вы планировали найти веломастерские и магазины то заходите к нам. Оказываем услугу платного хранения велосипедов в Москве по смешным ценам. Для квартир без кладовых или балконов очень удобно на зимнее время отдать велосипед на хранение в спец место. У нас вы получите прекрасный сервис с доставкой по необходимости.

  23. DouglasHoapy表示:

    1xBet Welcome Bonus https://actuchomage.org/includes/wkl/code_promo_69.html
    The 1xBet welcome bonus is a special offer available to new users when they sign up on the platform. This bonus usually includes a 100% match on the first deposit, up to a certain amount, giving new users more funds to start betting.

  24. Sweet Bonanza Jackpot – How Big Can You Win? Wondering how much you can win in Sweet Bonanza? Check out the maximum payout potential and find out how players are hitting the jackpot with huge multiplier bonuses.
    slot bonanza

  25. Charlesrab表示:

    pharmacie en ligne france livraison belgique pharmacie en ligne pas cher pharmacie en ligne france fiable

  26. free porn sex表示:

    Howdy, a helpful article for sure. Thank you.

  27. HeathZex表示:

    Achat mГ©dicament en ligne fiable: pharmacie en ligne france livraison internationale – acheter mГ©dicament en ligne sans ordonnance

  28. 10 Websites To Help You Be A Pro In Double Buggy 3 Wheels 3 wheel Bassinet Stroller – http://idea.informer.com/,

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。