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

368,762 Responses

  1. Прошу прощения, что вмешался… У меня похожая ситуация. Давайте обсудим.


    нормуль грузчики новосибирск пашино, новосибирск дом грузчиков или http://fb7953ir.bget.ru/index.php?subaction=userinfo&user=owelypozo устроиться грузчиком новосибирск

  2. Я считаю, что Вы не правы. Пишите мне в PM, обсудим.


    Замечательно, весьма ценная мысль требуется грузчик экспедитор новосибирск, новосибирск грузчики заказать а также http://vkmgroup.ru/forum/user/59041/ грузчик экспедитор вакансии новосибирск

  3. Carsonxch2表示:

    Guys just made a site for me, look at the link:
    https://forum.padasfm.cz/domains/forum.padasfm.cz/viewtopic.php?f=4&t=112529
    Tell me your references.

  4. Andreprark表示:

    https://viagracanada.xyz/# what milligrams does viagra come in

  5. boypoms表示:

    Numerous other agencies such as the U best cialis online

  6. Loreenpisn表示:

    gay sex chat simulator
    gay aam chat
    chat de gay usa

  7. I’m extremely impressed with your writing skills and also with the layout on your blog.

    Is this a paid theme or did you modify it yourself?
    Anyway keep up the nice quality writing, it is rare to see
    a nice blog like this one today.

  8. Fredpef表示:

    Конечно. И я с этим столкнулся. Давайте обсудим этот вопрос. Здесь или в PM.
    ввоз груза чрез забайкальск на маньчжурию, гуанчжоу, иу, жд перевозка китай москва шеньчжень либо на любой город.

  9. Smwpvi表示:

    order generic tadalafil 5mg accutane pills prednisone 40mg pill

  10. Fredpef表示:

    пройду мимо…
    авиа не получится доставить: батарейки, магниты, воды, порошки, купить оптом ткань от производителя из китая взрывоопасные давнешенько, и горючие материалы.

  11. JbolPipse表示:

    sildenafil tablets online australia viagra mastercard online pharmacy how to buy female viagra online

  12. Timothyenver表示:

    ??Регистрация в онлайн казино booi для запуска игр с выводом денег Для того, чтобы начать играть, делая ставки в реальных деньгах, требуется стать зарегистрированным пользователем на официальном сайте лицензионного онлайн казино. На главной странице сайта нужно нажать на расположенную вверху экрана голубую кнопку с надписью регистрация и создать учетную запись. При заполнении полей регистрационной формы потребуется указать номер мобильного телефона или адрес электронной почты и придумать пароль длиной не менее 6 символов. Заполненная форма отсылается нажатием кнопки зарегистрироваться и от администрации приходит сообщение либо на телефон, либо, соответственно, на почту о создании учетной записи. После этого можно заходить на портал. Казино ??? на реальные деньги с выводом: http://kupitsertifikat.ru/
    По телефону Регистрация в ??? доступна гражданам любой страны мира, вне зависимости от ограничений в местном законодательстве. Единственное условие – игрок должен быть совершеннолетним. При создании профиля по номеру телефона необходимо указать: непосредственно номер телефона в международном формате, валюту аккаунта, стартовый бонус на ставки на спорт или казино. После согласия с правилами ??? игрок получает логин и пароль для авторизации. Для участия в бонусных программах и возможности вывести выигрыши клиенту необходимо пройти верификацию личных данных. Для чего нужна регистрация на сайте? Регистрация в ??? открывает возможность игры на реальные деньги. Попробовать большинство слотов можно и в режиме гостевого доступа, но сорвать куш могут только действующие клиенты казино. Без создания счета невозможно участие в многочисленных акционных программах Booi. Верификация ??? Идентификация игрока не входит в список обязательных пунктов правил казино ???, но при первом запросе на вывод денег со счета представитель компании потребует подтвердить указанные в профиле сведения. Верификация предусматривает загрузку скан-копий паспорта. Если фотографий документа недостаточно, то букмекер может запросить: квитанции об оплате счетов за коммунальные услуги с указанными именем и фамилией плательщика, фотографии водительских прав, скан карты, с которой совершалось пополнение баланса. Обычно подтверждение личных данных занимает не более часа, но в правилах ??? указано, что проверка может затянуться до 7 календарных дней.
    Актуальное Зеркало ??? Для Бесперебойного Доступа На Сайт Также можно отправить в техподдержку электронное письмо или позвонить. Зайти на зеркальный сайт ??? Украина сможет каждый желающий, главное – позаботиться о нужном переходе заранее, а не в тот момент, когда портал уже заблокирован. Разработчики сфокусированы на мобильной версии сайта, поскольку с ее помощью можно открывать казино на любом устройстве, независимо от его характеристик. Для комфортного входа в заведение, достаточно добавить ярлык сайта в главное меню девайса. Клуб ??? рекомендует booi Access, который позволяет выполнить вход на главную страницу интернет-казино. После установки дополнительного расширения получится войти в учетную запись и продолжить игру в ??? игровые автоматы в удобном для себя формате – на деньги или бесплатно. Помните, что любую блокировку можно успешно обойти за пару минут, если использовать для этого официальное зеркало или проверенные и эффективные плагины и VPN. Бесплатные версии автоматов доступны без регистрации, но пользователи, зарегистрировавшие аккаунт, также могут их выбирать, кликнув на соответствующую кнопку при выборе режима игры. В бесплатных демо на балансе участника по умолчанию находится само возобновляемая кредитная сумма, которую не нужно возвращать. Любой пользователь может обратиться с вопросами к доброжелатель сотрудникам техподдержки. Ознакомиться с официальным сайтом ??? казино и попробовать сыграть в автоматы из каталога в демонстрационном режиме сможет каждый посетитель. Полный диапазон услуг игрового сервиса будет предоставлен после регистрации. Посещаемость интернет-портала booi казино увеличивается с каждым годом. Этот клуб давно признан одним из самых востребованных в индустрии гемблинга, но достигнуть этого удалось не сразу. Сегодня онлайн казино booi по праву гордится своими достижениями, в числе которых комфортный ресурс с инновационным сертифицированным программным обеспечением. Электронная версия сертификата на сайте Booi Club не публикуется. Известно только, что гемблинг производится в юрисдикции Коста-Рика. Посетители портала могут не беспокоиться о конфиденциальности. Аналогично, члены интернет казино уверены в защите персональных данных. Высокий уровень безопасности на проекте обеспечивается направлением сетевого трафика через протокол TLS 1.2. Все данные передаются в зашифрованном виде, кодировка производится по алгоритму AES-256. Помимо мобильного казино и обычной версии ???, участникам предлагается скачиваемое приложение.

  13. VernonBuM表示:

    how to get prescription drugs without doctor dog antibiotics without vet prescription

  14. Loreenpisn表示:

    gay chat cam rabdom
    free gay boy video chat
    gay chat ohio

  15. average cost of window replacement Aspectmontage Window Boston Around 80% of the fetch of the waxy windows in Boston accounts repayment for the tractable profile and glass module, 10% – during window sills, frames, soffits, and sashes, and 10-15% – in behalf of the fittings. If you arbitrate to induct plastic windows in your apartment, you commitment be undergoing to budget destined for not simply the window conspiracy price. Do not forget on touching shipping and installation. We intention total $ 30 to your order.

  16. grearly表示:

    where to buy cialis online safely For instance, the medicine can remain effective for 24 hours to 36 hours after taking it, or even up to 72 hours

  17. Davidhooft表示:

    Менеджер маркетплейсов: обучение обучение-менеджер-маркетплейсов.рф
    – курсы бесплатно и платно по работе с маркетплейсами Вилдберриз, Озон, Я.Маркет и т.п., и освоение работы для начинающих с нуля “Менеджер маркетплейсов”, на курсах обучат аналитике, разным форматам продвижения уже через короткое время, освойте востребованную профессию online и получите навыки и практику в интернет-маркетинге, для того, чтобы зарабатывать деньги и помогать предпринимателям; на курсах рассматривается работа с карточками, планирование стратегии продвижения, взаимодействие с поставщиками, особенности отдельных маркетплейсов, после окончания профессионального курса вы получаете сертификат, цены указаны по ссылке.

  18. VernonBuM表示:

    tamoxifen postmenopausal arimidex vs tamoxifen bodybuilding

  19. Andreprark表示:

    https://molnupiravir.life/# molnupiravir covid drug

  20. Karmsnaps表示:

    cialis buy online Take Cialis exactly as your provider tells you

  21. replacement window companies near me Aspectmontage – Window replacement Boston Massachusetts. There is a batch of striving among companies installing plastic windows. But unfortunately, they encompass many wicked peddle players. When choosing a contractor, it is straightforward to get caught in a scam, despite after thoroughly studying the number of PVC windows and types of glazing. After all, various defects can be identified only after some pro tempore, when the agreement has expired.

    • HOW TO MAKE A WOODEN WINDOW FRAME
      Window frames are quite a complex construction whits window replacement , so it is euphonious disputable to independently bring up a window state, the characteristics of which disposition fully intersect the parameters of the mill counterparts. This process discretion lack master understanding, skills, and certain equipment.

    • HOW TO MAKE A WOODEN WINDOW FRAME
      Window frames are thoroughly a complex construction whits window replacement , so it is attractive problematic to independently bring up a window state, the characteristics of which pleasure fully meet the parameters of the works counterparts. This process discretion call for knowledgeable understanding, skills, and certain equipment.

    • how to measure windows for replacement The dynasty window replacement should be dignified from the boulevard and the living room side of the house. Both dimensions are required to condition the nethermost reaches of the window opening. It is necessary to know that the window should have no less size than the outside of the window. And how much more significant? This is what we should estimate egress window ordination nigh me. Recall that the outset can be skewed, especially if it is manifest in panel houses, so you need to develop the rate of the order by the range of the skew. After you determine the window’s dimensions, you should compare them to the internal measurements of the opening. This resolve consider you to find mechanical errors in the calculations you мейд earlier and then estimated what coat should be utilized to apply to the local soffits.

    • how to measure windows for replacement The whore-house window replacement should be measured from the boulevard and the living cubicle quarters side of the house. Both dimensions are required to end the nethermost reaches of the window opening. It is fated to know that the window should give birth to no less appraise than the surface of the window. And how much more significant? This is what we should calculate egress window ordination near me. Remember that the opening can be skewed, especially if it is evident in panel houses, so you emergency to increase the greatness of the order by the proportions of the skew. After you fix on the window’s dimensions, you should merit comparison with them to the internal measurements of the opening. This will allow you to find inanimate errors in the calculations you мейд earlier and then estimated what plaster should be tempered to to on to the domestic soffits.

    • how to measure windows for replacement The whore-house window replacement should be dignified from the thoroughfare and the living chamber side of the house. Both dimensions are required to condition the nethermost reaches of the window opening. It is important to identify that the window should induce no less range than the surface of the window. And how much more significant? This is what we should estimate egress window ordination within reach of me. Remember that the break can be skewed, conspicuously if it is conspicuous in panel houses, so you have need of to develop the size of the design through the range of the skew. After you fix on the window’s dimensions, you should merit comparison with them to the internal measurements of the opening. This resolve consider you to secure mechanical errors in the calculations you мейд earlier and then estimated what coat should be tempered to to on to the local soffits.

    • how to measure windows for replacement The house window replacement should be calculated from the avenue and the living room side of the house. Both dimensions are required to condition the depth of the window opening. It is necessary to remember that the window should give birth to no less largeness than the outside of the window. And how much more significant? This is what we should assess egress window solemnization nigh me. Recall that the look-in can be skewed, especially if it is evident in panel houses, so you emergency to increase the size of the design on the proportions of the skew. After you end the window’s dimensions, you should merit comparison with them to the internal measurements of the opening. This resolve agree to you to find machine-made errors in the calculations you made earlier and then estimated what plaster should be familiar to credit to the intimate soffits.

    • how to measure windows for replacement The dynasty window replacement should be calculated from the thoroughfare and the living room side of the house. Both dimensions are required to end the perspicaciousness of the window opening. It is fated to be familiar with that the window should contain no less size than the aspect of the window. And how much more significant? This is what we should estimate egress window placement nigh me. Recognize that the opening can be skewed, especially if it is conspicuous in panel houses, so you emergency to broaden the greatness of the order on the proportions of the skew. After you determine the window’s dimensions, you should merit comparison with them to the internal measurements of the opening. This commitment deduct you to secure mechanical errors in the calculations you made earlier and then estimated what smear should be familiar to employ to the interior soffits.

  22. Jeancluse表示:

    Я уверен, что это уже обсуждалось.
    после диагностики расчистка участка https://cleanvillage.ru/ нужно составить на бумаге график, очередность манипуляций.

  23. RileySAR表示:

    ?? Игровые автоматы на деньги с выводом на карту О существовании азартных заведений в сети знают даже школьники. Игровые автоматы быстро завоевали высокую популярность среди русскоязычных пользователей благодаря хорошим шансам быстрой организации стабильного дохода при минимальных рисках слива. Некоторые игроки выбирают слоты исключительно для приятного времяпровождения и получения определенной дозы адреналина. Наличие качественно разработанной программы лояльности позволяет начать играть на валюту без первоначальных инвестиций – за счет получения приветственного поощрения. Казино gmslots Booi – slots club – booi рабочее зеркало на сегодня
    Сайт зеркала ??? Сайт зеркала ???
    Мобильная версия Мобильное приложение, кстати говоря, работает пока что только на Андроиде, появится ли версия для Айфонов — достоверно не известно. Скачиваем, разумеется, прямо на сайте. Приложение занимает мало место, не грузит телефон, доступны все функции.

  24. grearly表示:

    buy cialis pills Located at 26877 Cummings Valley Road

發佈留言

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