針對全文透過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...

346,867 Responses

  1. gegizAppen表示:

    Хотите купить семена высокого качества? Семена на Яблочкова онлайн-магазин – это то, что вам необходимо. Здесь вы найдете семена овощей, трав, цветов и других растений. Мы регулярно обновляем наш ассортимент, гарантируем высокое качество, удобство заказа и профессиональную поддержку. Ищете купить озимый чеснок? Magazinsemena.ru – сайт, где представлен большой выбор семян разных растений для удовлетворения потребностей клиентов. Предлагаем оперативную и надежную доставку. Готовы помочь вам с подбором семян и ответить на любые вопросы.

  2. Robertfeary表示:

    кракен тор – кракен сайт работает, кракен даркнет площадка ссылка

  3. WilliamRhype表示:

    http://ciprofloxacin.tech/# buy cipro online

  4. Win Cash Instantly with Online Games in Kenya
    real money online casinos best online casino games to win money .

  5. Blakeclera表示:

    Сергей Сароян из «Телетрейд» угрожал сотруднику смертью и требовал выкуп $5000 из-за помощи клиентам
    Читати українською

    Сергей Сароян из «Телетрейд» угрожал сотруднику смертью и требовал выкуп $5000 из-за помощи клиентам
    Глава украинского «Телетрейд» Сергей Сароян со своими охранниками похитил подчиненного, с мешком на голове ночью вывез в район лимана Куяльник, где того избивали, угрожали «закопать в болоте» и требовали выкуп за жизнь 5 тысяч долларов.

    До недавнего времени Олег Иванович Фурдуй работал в «Центре Биржевых Технологий» – украинской «дочке» «Телетрейд». Одно время возглавлял одесский офис, был кризис-менеджером в Киеве. Сергей Сароян обвинял его в «крысятничестве», которое выражалось в помощи украинским клиентам с выводом денег.

    Как руководит Сергей Сароян: реальные истории клиентов, оставшихся ни с чем

    С момента, как у руля украинского филиала стал Сергей Сароян, тех, кто не может вернуть свои средства из «Телетрейд», становится все больше. Один из них Никита Лебединский, который не может вывести деньги из «Форекс Оптимум», дочерней компании структуры «Телетрейд», так как не хочет больше работать с этой компанией.

    Однако ему постоянно отказывают под откровенно надуманными предлогами. «Они считают меня за дурака, – утверждает Никита, – повторяя, что мой банк-эмитент отказал в переводе средств, хотя я им предоставил юридическую информацию из банка о том, что отказа не было.

    Еще одна клиентка, которой «Телетрейд» отказывается вернуть собственные средства – Наталья Лячина.

    Наталья также уже месяц не видит своих денег, хотя ранее в «Центре Биржевых Технологий» Сергей Сароян убеждал, что она может обналичить свой счет в «Телетрейд» в любой момент.

    Следующий наглядный пример – история Ольги Король.

    Ольга Король сотрудничает с ЦБТ и «Телетрейд» уже более трех лет, однако обещанных сказочных прибылей так и не увидела, а, кроме того, потеряла часть изначального депозита. Собираясь прекратить это бесполезное сотрудничество, она захотела вывести остатки денег, но Сергей Сароян был против. Клиентка столкнулась с непонятными препятствиями. Так же как и Светлана Клубкова, которой отказами в выводе со странной формулировкой: «Заявка удалена, обратитесь в офис-партнера». С офисом партнера Светлана связаться не смогла.

    На данный момент Светлана, Ольга и все остальные клиенты обращаются за помощью в компанию «Амиллидиус», чтобы получить шанс увидеть свои деньги, так как Сергей Сароян, очевидно, не собирается их возвращать по доброй воле.

    Наиболее вопиющим примером является история клиента «Телетрейд» из Туниса Абдулатифа Хашима Альбаргави, который за одну ночь лишился суммы почти в полмиллиона долларов. Эти деньги были похищены с его счета в «Телетрейд» после того, как он попытался их вывести. Обращение в «Амиллидиус» стало для него, как и для других, попыткой восстановить справедливость.

    «Телетрейд» со своей дочкой ЦБТ грабят украинцев

    Внимание! В Украине орудуют мошенники! Долгие годы компания «Телетрейд» и ее дочерняя фирма «Центр биржевых технологий» безнаказанно грабят украинцев. Сейчас тут всем заправляет Сергей Сароян, однако он не единственный. «Телетрейд» — форексная компания, зарегистрированная в офшоре на Карибских островах. В 2018 году ее лишили лицензии национальные регуляторы России и Беларуси, после чего она потеряла право работать в этих странах. А годом позже МВД РФ начало уголовное производство согласно ч. 4 ст. 159 УК РФ по признакам мошеннических действий в особо крупных размерах. Владелец «Телетрейд» Владимир Чернобай вместе со своим соучастником — родным племянником Олегом Суворовым сбежали за границу и были объявлены в розыск. Еще одно уголовное дело настигло «Телетрейд» в Казахстане в начале этого года — там брокеров уличили в том же самом мошенничестве особо крупных размеров.

    Сергей Сароян возглавил «Центр Биржевых Технологий»

    «Центр Биржевых Технологий» — входит в структуру «Телетрейд». Это украинская дочерняя компания, цель которой — привлекать максимальное количество клиентов в «Телетрейд» для выкачивания их денег на офшорные счета черных брокеров. В 2019 году ее истинную сущность обнаружила Национальная комиссия по ценным бумагам и фондовому рынку — украинский профильный регулятор. Он объявил ЦБТ мошенниками и на своем сайте предупредил граждан Украины о зашкаливающих рисках потери денег в этой организации. А летом 2020 года СБУ и Генпрокуратура пришли в офисы ЦБТ с обысками, провели изъятие документов и техники. В 2019 году данную контору возглавил Сергей Сароян.

    Пора остановить аферистов!

    Прошедшим летом в Украине возникла и начала действовать группа обманутых клиентов «Телетрейд» . Люди объединились для защиты своих прав. Заручившись поддержкой компании «Амиллидиус» и ее владельца Богдана Терзи, они провели серию пресс-конференций, на которых мошенники из «Телетрейд», в числе которых Сергей Сароян, были последовательно разоблачены.

    На первой пресс-конференции в УНИАН клиенты рассказали свои истории и, вместе с бывшими сотрудниками ЦБТ, раскрыли схемы, используемые «Телетрейд» для кражи денег, а также назвали имя куратора мошенников в Украине. Это Сергей Сароян.

    На второй пресс-конференции в Интерфакс была обнародована информация по уголовным делам в России и Казахстане, показаны сотни исковых заявлений обманутых клиентов «Телетрейд» и видеопризнание бывшего сотрудника этого брокера.

    На третьей пресс-конференции Богдан Терзи и представитель обманутых клиентов Александр Роговский продемонстрировали убедительные доказательства того, как сегодня «Телетрейд» и Сергей Сароян обворовывают клиентов через проект «Синхронная торговля».

    На четвертой пресс-конференции, посвященной «Телетрейд», гражданин Туниса Абдулатиф Хашим Альбаргави рассказал через видеообращение как в 2019 году «Телетрейд» украл с его счета полмиллиона долларов. Были продемонстрированы доказательства причастности к этому гражданина РФ Мингияна Манжикова — куратора техподдержки и бухгалтерии «Телетрейд».

    В ходе борьбы обманутых клиентов выяснилось, что российским мошенникам помогает Денис Богуш — политтехнолог и пиарщик. Он старательно позиционирует себя как патриот Украины, а на деле за деньги защищает «Телетрейд» и помогает им кидать украинцев.

    Теги: ОбманАбдулатиф Хашим АльбаргавиРоговский АлександрСуворов ОлегКлубкова СветдланаКороль ОльгаФорекс ОптимумКиевФурдуй ОлегТелеТрейдСароян Сергей

    13 апреля 2021 г., 14:19 Просмотров: 8839 Комментарии: 0
    Распечатать Послать другу

    Комментарии:

  6. Ronaldpsymn表示:

    http://lisinopril.network/# lisinopril 20 mg discount

  7. Топовая Букмекерская контора на просторах 1win

  8. RandallTaulp表示:

    cytotec online: buy cytotec online – cytotec abortion pill

  9. Davidtes表示:

    buy cipro online buy ciprofloxacin purchase cipro

  10. RandallTaulp表示:

    lisinopril 10 mg online: lisinopril brand name canada – lisinopril tabs

  11. 1win885piodo表示:

    Отличная Букмекерская контора, всем советую 1win

  12. frankienz69表示:

    Conventions of courtship gender and race differences in the
    https://foot-master-prostituta.fetish-matters.net/?yolanda-breonna

  13. WilliamRhype表示:

    https://ciprofloxacin.tech/# cipro ciprofloxacin

  14. Robertsib表示:

    Сайт, где можно купить качественные раковина мебельная по выгодным ценам.

  15. Richarddax表示:

    020 Apple ipad 2 Apple ipad 3 Apple ipad 4 Apple ipad 5 air Apple ipad 6 Apple ipad 7 Apple ipad 9.7″ 2017 Apple ipad air Apple ipad air 2 Apple ipad mini 1 Apple ipad mini 2 Apple ipad mini 3 Apple ipad mini 4 Apple ipad mini 5 Apple ipad mini 6 Apple ipad pro 10.5″ Apple ipad pro 11″ 2018 Apple ipad pro 11″ 2020 Apple ipad pro 12.9″ Apple ipad pro 12.9″ 2020 Apple ipad pro 9.7″ Apple iphone 12/12 pro Apple iphone 11 Apple iphone 11 Apple iphone 11 pro Apple iphone 11 pro max Apple iphone 12 Apple iphone 12 (5.4) Apple iphone 12 (6.1) Apple iphone 12 (6.7) Apple iphone 12 pro Apple iphone 13 Apple iphone 13 mini Apple iphone 13 pro Apple iphone 13 pro max Apple iphone 13 pro max/14 plus Apple iphone 13/13 pro Apple iphone 13/13 pro/14 Apple iphone 14 Apple iphone 14 max Apple iphone 14 pro Apple iphone 14 pro max Apple iphone 15 Apple iphone 15 plus Apple iphone 15 pro Apple iphone 15 pro max Apple iphone 3g Apple iphone 3gs Apple iphone 4 Apple iphone 4s Apple iphone 5 Apple iphone 5c Apple iphone 5s Apple iphone 6 Apple iphone 6 plus Apple iphone 6 plus/6s plus Apple iphone 6s Apple iphone 6s plus Apple iphone 7 Apple iphone 7 plus Apple iphone 7/8/se 2020 Apple iphone 8 Apple iphone 8 plus Apple iphone se Apple iphone se 2020 Apple iphone x Apple iphone x/xs Apple iphone x/xs/11 pro Apple iphone xr Apple iphone xr Apple iphone xr/11 Apple iphone xs Apple iphone xs max Apple iphone xs max/11 pro max Apple ipod nano Apple ipod touch 1 Apple ipod touch 4 Apple ipod touch 5 Apple macbook 12 retina Apple macbook air 11″ Apple macbook air 11″ Apple macbook air 13.3″ Apple macbook air retina 13.3″ Apple macbook pro 13 Apple macbook pro 15.4 Apple macbook pro 16″ retina Apple macbook pro retina 13 Apple macbook pro touch bar 15” Apple watch 40/41mm Apple watch full case magnetic 44mm Apple watch series 1 38mm Apple watch series 1 42mm Apple watch series 2 38mm Apple watch series 2 42mm Apple watch series 3 38mm Apple watch series 3 42mm Apple watch series 3 nike+ 38mm Apple watch series 3 nike+ 42mm Apple watch series 4 gps 40mm Apple watch series 5/se 40mm Apple watch series 5/se 44mm Apple watch series 6 40mm Apple watch series 6 44mm Asus eee pad memo me171 Asus eee pad transformer prime (tf201) Asus fonepad (me371mg) Asus fonepad 7 (fe170cg) Asus fonepad 7 (fe375cg) Asus fonepad 7 (me372cg) Asus fonepad 7 dual sim (me175cg) Asus fonepad 8 (fe380cg) Asus fonepad note 6 (me560cg) Asus memo pad 10 me102a Asus memo pad 7 me170c Asus memo pad 7 me172v Asus memo pad 7 me176c Asus memo pad 7 me375cl Asus memo pad 8 me180a Asus memo pad 8 me181c Asus memo pad hd 7 me173x Asus memo pad me301t Asus nexus 7 me370t 2012 Asus nexus 7 me571k 2013 Asus padfone 3 infinity (a80) Asus transformer pad (tf300tg) Asus vivotab smart (me400c) Asus zenfone 2 (ze500cl) Asus zenfone 2 (ze551ml) Asus zenfone 2 laser (ze500kg) Asus zenfone 2 laser (ze500kl) Asus zenfone 2 laser 5.5 (ze550kl) Asus zenfone 3 (ze520kl) Asus zenfone 3 (ze552kl) Asus zenfone 3 (zs550ml) Asus zenfone 3 deluxe (zs570kl) Asus zenfone 3 laser (zc551kl) Asus zenfone 3 max (zc520tl) Asus zenfone

  16. 1. Вибір натяжної стелі: як правильно підібрати?
    2. ТОП-5 переваг натяжних стель для вашого інтер’єру
    3. Як доглядати за натяжною стелею: корисні поради
    4. Натяжні стелі: модний тренд сучасного дизайну
    5. Як вибрати кольорову гаму для натяжної стелі?
    6. Натяжні стелі від А до Я: основні поняття
    7. Комфорт та елегантність: переваги натяжних стель
    8. Якість матеріалів для натяжних стель: що обрати?
    9. Ефективне освітлення з натяжними стелями: ідеї та поради
    10. Натяжні стелі у ванній кімнаті: плюси та мінуси
    11. Як відремонтувати натяжну стелю вдома: поетапна інструкція
    12. Візуальні ефекти з допомогою натяжних стель: ідеї дизайну
    13. Натяжні стелі з фотопринтом: оригінальний дизайн для вашого інтер’єру
    14. Готові або індивідуальні: які натяжні стелі обрати?
    15. Натяжні стелі у спальні: як створити атмосферу затишку
    16. Вигода та функціональність: чому варто встановити натяжну стелю?
    17. Натяжні стелі у кухні: практичність та естетика поєднуються
    18. Різновиди кріплень для натяжних стель: який обрати?
    19. Комплектація натяжних стель: що потрібно знати при виборі
    20. Натяжні стелі зі звукоізоляцією: комфорт та тиша у вашому будинку!

    підвісні потолки https://natyazhnistelidfvf.kiev.ua/ .

  17. Play and Earn Real Money Online in Kenya
    best online casino games to win money real money online casinos .

  18. RandallTaulp表示:

    cipro ciprofloxacin: buy cipro online canada – ciprofloxacin

  19. WilliamRhype表示:

    http://cytotec.club/# Cytotec 200mcg price

  20. Davidtes表示:

    lisinopril 40 mg best price prescription drug lisinopril generic lisinopril 10 mg

  21. vo_ntorg_huot表示:

    Воєнторг
    19. Тактические ремни и пояса для фиксации снаряжения
    тактичне взуття lowa https://voentorgklyp.kiev.ua/vzuttya/cherevyky/ .

  22. RandallTaulp表示:

    cost of propecia tablets: cost of cheap propecia online – cost of cheap propecia prices

  23. Real Money Earning Games in Kenya
    best online casino games to win money real money online casinos .

  24. Ronaldpsymn表示:

    http://cytotec.club/# buy cytotec

  25. Davidtes表示:

    how to prevent hair loss while on tamoxifen nolvadex during cycle nolvadex vs clomid

  26. WilliamRhype表示:

    https://lisinopril.network/# lisinopril 10 mg tablet

發佈留言

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